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前 端 开发 者 指南 (2017) 








作者 : #1 KA (Cody Lindley) ， 由 【前 端 大 师 (Frontend Masters) | 倾情 赞助 

这 是 一 本 可 供 任 何人 使 用 的 指南 ， 用 于 学 习 前 端 开发 实践 。 该 指南 大 体 上 勾勒 出 了 前 端 工程 

的 轮廓 ， 同 时 也 讨论 了 前 端 工程 的 实践 : 2017 年 ， 如 何 学 习 前 端 工 程 ， 用 什么 工具 来 实践 ? 
笔者 有 意 将 本 书 打造 为 一 份 专业 资料 ， 为 想 要 或 正在 实践 的 前 端 开发 者 们 提供 学 习 材 料 和 开 

发 工具 。 其 次 ， 它 同样 可 供 主管 、 CTO、 讲 师 和 猎头 们 深入 探索 前 端 开发 实践 。 


本 书 内 容 偏 向 于 WEB 技术 (HTML ` CSS ` DOM ` JavaScript) 和 以 这 些 技术 为 根基 直接 构 
建 而 成 的 开源 技术 。 书 中 引用 和 讨论 的 材料 要 么 就 是 同类 族 楚 ， 要 么 就 是 解决 问题 的 流行 方 
Zo 


AER QM dA 可 用 资源 的 综合 纲领 。 其 价值 在 于 为 恰好 够 用 的 分 类 信息 搜罗 简 
、 聚 焦 且 符合 时 宜 的 甄选 内 容 ， 以 免 在 特别 话题 下 钼 了 牛角 灾 。 


预期 本 书 每 年 都 迭代 一 次 内 容 。 


第 二 部 分 : 学 习 前 端 开 发 


第 二 部 分 指出 了 学 习 成 为 一 个 前 端 开发 者 所 需 的 自学 资源 和 教学 资源 ( 译 者 注 : 教学 资源 包 
括 有 讲师 指导 的 付费 课程 、 计 划 、 学 院 和 训练 营 ) 。 


第 三 部 分 简要 地 介绍 和 指出 了 一 些 前 端 图 内 的 工具 。 
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下 载 .pdf、.epub、 或 ,mobi 格式 的 电子 书 : 


e 中 文 : https://www.gitbook.com/book/sqrtthree/front-end-handbook-2017/details 
e 美文 : https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details 


贡献 内 容 、 提 建议 或 者 修复 GitHub 上 的 bugs: 


e https://github.com/xitu/front-end-handbook-2017 


oce 


本 文档 基于 Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License 
协议 发 布 。 
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前 端 开发 者 是 什么 ? 


『 端 开发 者 是 什么 ? 


WEB 前 端 开发 ， 也 作客 户 端 开 发 ， 是 给 网 站 或 网 页 应 用 生产 HTML、CSS 和 
JavaScript 的 过 程 ， 它 让 用 户 得 以 浏览 网 站 或 网 页 应 用 并 与 之 交互 。 创 建 网 站 前 端的 工 
有 具 与 技术 时 常 变革 ， 因 此 开发 者 应 对 业内 发 展 近况 保持 清醒 ， 这 是 前 端 开 发 者 面 对 的 挑 
战 。 


保证 用 户 打 开 网 站 时 ， 以 一 种 易 读 且 关 联 的 形式 浏览 信息 ， 是 设计 网 站 的 目的 。 目 前 这 
AS OR REA EGER AE: 如 今 用 户 使 用 的 设备 种 类 繁多 ， 设 备 对 应 的 屏幕 尺寸 和 方案 亦 然 ， 
这 迫使 设计 者 在 开发 站 点 时 考虑 这 些 方面 。 他 们 要 保证 站 点 在 不 同 的 浏览 器 ( 跨 浏览 
) ， 不 同 的 操作 系统 〈 跨 平台 ) 以 及 不 同 的 设备 〈 跨 设备 ) 上 正确 运行 ， 这 要 求 开 发 
ABS EXE 


https://en.wikipedia.org/wiki/Front-end web development 


HTML ` CSS 和 JavaScript: 


前 端 开发 者 使 用 WEB 技术 〈 例 如 HTML ` CSS ^ DOM 和 JavaScript) 来 建造 网 站 和 开发 应 
用 。 他 们 使 用 WEB 技术 在 WEB 平台 或 非 WEB 框架 (比如 NativeScript 框架 ) 上 设计 程 
序 。 











page, updating a user 
profile, and more. 


(ity \ 
aa 


1 LE = |--THE BACK END--, p 
! A site is loaded A Client-side scripts «9 When a call to the : creen d 99 Server-side scripts 
1 mo 
in a browser from Run in the browser and database İS required ile | < | | process the data, 
the server. 一、 Process requests without JavaScript and AJAX send | | — y. S 2|! then update the 
ac.) call-backs to the server requests to the back end. : 一 «il f | site—populating 
" A EN 1 [ 1 drop-down menus, 
| y i o nein | = ~ | loading products to a 
\AL TT aaa /= bye 4| |! 
— eN). Response i 5 1 
1 
1 1 
1 I 


asa G= - ^ Database 
T d Servers 
[| 


Responsive front-end Everythingauserseesinthe “I * The back-end server-side scripts process 
design allows a site to browser is a mix of HTML, the request, pull what they need from the 
adapt to a user's device. CSS, and JavaScript. database then send it back. 


图 片 来 源 : https://www.upwork.com/hiring/development/front-end-developer/ 


通常 前 端 开发 者 通过 学 习 HTML、CSS 和 JS 来 入 门 。HTML、CSS 和 JS 代码 在 WEB 浏览 
器 、 无 头 浏览 器 (Headless Browsers) 、WebView 上 和 运行， 或 者 被 用 于 原生 运行 环境 的 程 
序 设 计 。 我 稍 后 解释 这 四 种 运行 场景 。 


WEB 浏览 器 
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4= 


WEB 浏览 器 用 于 从 万 维 网 (WWW.) 检索 、 哇 现 和 遍历 信息 。 通 常 浏览 器 在 台 aa 笔记 
) ki 


本 、 平 板 或 手机 上 运行 ， 如 今 ， 浏 览 器 可 以 在 几乎 所 有 物体 (比如 冰箱 ， 汽 


常见 的 WEB 浏览 器 如 下 〈 按 使 用 度 排序 ) 


e Chrome 

e |E (i: 非 Edge， 数 据 参 考 自 IE9 至 IE11) 
e 火狐 

e Safari 


无 头 浏览 器 (Headless Browsers) 


无 头 浏览 器 是 一 种 没有 用 户 图 形 界 面 的 WEB 浏览 器 ， 我 们 可 以 用 命 界面 编程 控制 该 浏览 
器 ， 达 到 自动 化 运行 Web 页 面 (比如 功能 测试 、 网 站 检索 、 = 上 的 目的 。 可 将 无 头 
浏览 器 看 作 网 页 浏览 器 ， 不 过 你 用 命令 行 来 检索 、 遍 历 网 页 。 


e PhantomJS 


e slimerjs 
e trifleJS 
Webviews 
原生 操作 系统 的 原生 应 用 中 ， 用 Webviews 来 运行 网 页 。 不 妨 把 webview 28 X, — MK MRE 


页 
应 用 的 iframe 或 WEB 浏览 mes 签 ， 而 该 原生 应 用 运行 在 设备 的 系统 上 (比如 JOS ^ 2H > 
windows) ° 


常见 的 webview 开发 解决 方案 如 下 : 


e Cordova (通常 用 于 手机 、 平 板 的 原生 应 用 ) 
e NW.js ( 通 | 
e Electron (通常 用 于 桌面 应 用 ) 


基于 WEB 技术 的 原生 应 用 


最 终 ， 前 端 开 发 者 从 WEB 浏览 器 开发 中 得 到 经 验 ， 并 可 以 脱离 浏览 器 引擎 环境 编码 。 近 来 ， 
人 们 正在 构思 如 何 脱 离 web 引擎， 用 web 技术 (比如 CSS 和 JS). 来 构建 原生 应 用 。 


该 环境 的 例子 


e NativeScript 
e React Native 


请 确认 自己 明白 “web platform” 4) £442 3; » Æ "The Web platform: what it is” 和 维基 百科 
"Open Web Platform" 


13 


2016 前 端 开 发 回顾 


UI 组 件 和 组 件 树 被 用 于 构建 复杂 UI。 

组 件 由 单一 文件 构成 ， 在 单个 文件 中 可 能 同时 包含 HTML、CSS 和 JS 不 再 有 违 主流 开 
发 思想 。 

React ` Redux ` Webpack ` ECMAScript 2015 (也 叫 ES6) 和 Babel 被 广泛 采用 。 这 
解决 方案 跃 居于 最 常用 技术 榜 单 前 列 。 

开发 者 意识 到 ， 在 开发 原生 应 用 时 ， 借 助 webviews 的 H5 混合 式 移动 开发 在 多 数 情 况 下 
不 具备 足够 优势 。 

React Native 和 NativeScript 开始 替代 H5 混合 式 webview 开发 。 

大 多 数 人 舍弃 Gulp 转 而 使 用 NPM 脚本 ， 但 Gulp 仍 受 欢 迎 。 

SASS 工具 继续 受到 欢迎 ， 与 此 同时 PostCSS (+ CSSNext) 开始 发 展 。 

大 多 数 开 发 者 都 开始 对 HTML ^ CSS 和 JavaScript (ESlint 替代 了 JShint，JSCS 也 被 
整合 进 ESLint) 进行 语法 检查 。 

开发 者 弃 Sublime 和 Atom 转投 Visual Studio Code 编辑 器 ， 这 成 为 一 种 趋势 。 

jQuery 仍 有 热度 ， 但 使 用 率 和 关注 度 都 在 下 滑 。jQuery 3 已 然 发 布 ， 却 无 人 问津 。 
Vue.js 理 所 应 当地 吸收 更 多 追随 者 。 

JavaScript 函数 式 编程 和 模式 备 受 关注 。 

离线 开发 和 渐进 式 WEB 应 用 (PWA) 步 入 主流 。 

微软 发 力 。 

基于 web 技术 ， 使 用 NW.js 和 Electron 开发 windows > OSX £f linux 原生 应 用 的 方式 逐 
渐 成 型 。 

Angular 2 〈 在 将 来 也 叫 作 "Angular ) 跌 下 神 坛 ， 多 数 人 意识 到 它 将 不 再 如 Angular 1 7f 
AER 

JavaScript X fk. E R44 4 FLAP AM AA EL o 

更 多 的 开发 者 开始 把 工具 化 (比如 自动 化 ) 和 测试 当 回 事 了 。 

静态 站 点 生成 器 被 重视 起 来 。 

CSS 网 格 布局 (CSS Grid) 势头 正 旺 且 前 途 无 量 。 

NPM 受到 来 自 Yarn 的 挑战 。 

下 一 代 类 React 方案 的 演化 通过 Preact、Deku、Rax 和 inferno 的 形式 展现 ， 并 伴随 着 
少量 API 改动 。 

此 前 大 多 数 人 学 习 接 受 JSX， 而 如 今 他 们 已 经 享受 其 中 。 

一 种 可 用 的 CSS 模块 模式 (CSS encapsulation) 已 经 实现 并 投入 使 用 ， 因 此 对 许多 人 
来 说 ，CSS in JS 成 为 一 种 切实 可 行 的 解决 方案 。 

越 来 越 多 人 着 手 进行 UI 的 功能 性 、 整 合 性 测试 ， 其 中 包含 例如 可 视 化 CSS fe RWD ( 译 
注 : 响应 式 网 页 设计 ， 全 称 Responsive web design) 回归 测试 的 概念 。 

得 益 于 老 版 本 IE 使 用 、 开 发 程度 的 大 幅度 降低 ， 为 浏览 器 API 一 致 性 而 战 的 时 代 已 离 我 
们 远 去 。 


la 


几乎 人 人 都 意识 到 开发 网 页 的 时 候 必 须 考 虑 多 设备 适 配 策略 。 

使 用 其 他 语言 的 开发 者 持续 涌 入 JS 领域 ， 他 们 也 带 来 了 一 些 东 西 : 例如 类 型 检测 ， 和 对 
类 语法 以 及 面向 对 象 思想 的 执 念 。 

前 端 开 发 引入 了 热 模块 替换 技术 和 时 间 旅 行 调 试 。 

原生 JS 浏览 器 模块 加 载 器 更 受 期 待 了 。 

Enforcing CSS 和 JS 格式 规范 变 得 更 受 重视 (就 ES3 到 ES6 编码 以 及 CSS 预 处 理 语 
法 两 者 的 变化 而 论 ) 。 

少 部 分 开发 者 开始 在 JS 上 跑 极 限 学 习 机 (Extreme Learning Machine) 算法 ， 这 足以 引 
TypeScript 被 正式 使 用 在 一 些 地 方 ， 并 且 圈 了 一 些 粉 。 

aurelia 成 为 企业 级 开发 者 的 明智 之 选 (也 就 是 说 受到 支持 1 ) 。 

Webpack 采取 措施 并 巩固 了 优势 地 位 ， 更 胜 一 筹 的 JSPM 解决 方案 暂 居 其 下 。 

HTTPS > Æ > AARNE 

BASH # windows 系统 上 展露 头 脚 。 

通知 功能 API 可 以 被 使 用 了 ， 并 在 chrome 上 有 些 滥用， 但 这 只 会 发 生 在 你 授予 它 权 限 
之 后 。 

FireBug 调试 工具 退出 历史 舞台 。 

2016-F > CSS 20 9? T >° 

Immutability 概念 发 展 势 头 正 旺 。 
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e Web Assembly Æ Z ik 3] — 4-31 #4) S A. » 

. AZE <script> </script> 中 使 用 Import 进行 模块 懒 加 载 。 详情 见 这 里 

e JavaScript 同 构 解 决 方案 持续 增长 ， 致 数 服 务 器 端 输出 前 端 内 容 的 时 代 (PP: 页 面 直 出 
到 浏览 器 ) 。 参 见 NextJS 

e 响应 式 编程 继续 葛 壮 成 长 。 (参见 MobX and RxJS) 

e React， 尤 其 是 它 倡 导 的 概念 继续 占有 支配 地 位 。 而 React 本 身 会 被 彻底 重 写 (React 
Fiber) 或 者 进化 (Inferno ) 

。 Angular 终于 决定 遵循 SEMVER 规范 ， 所 以 Angular4 (#24 Angular5) 有 望 在 2017 
年 发 布 。 参 见 Roadmap 

e 简单 的 网 站 即 Web 1.0 可 能 会 重新 流行 ， 但 会 建立 在 2017 年 新 工具 的 基础 上 。 (例如 
Static site generation ) 

e RESTful JSON APIs 会 更 有 竞争 力 (参见 GraphQL ) 

e 2017 可 能 是 VueJS 的 丰收 年 。 

© 越 来 越 多 的 开发 者 在 做 静态 站 点 以 及 API CMS tools 时 开始 抛弃 传统 的 CMS 解决 方案 。 

e 更 多 的 人 从 Sass 转向 PostCSS + CSSNext 。 

e 越 来 越 多 地 见 到 HTTP2 和 HTTPS 的 身影 。 

e Web Components 继续 潜伏 等 待 开发 者 们 助力 实现 前 所 未 有 的 大 爆发 。 

© 无 框架 的 框架 势头 正 猛 。 (参见 Svelte) 

e JavaScript 标准 即将 尘埃 落 定 ， 同 时 期 待 CSS 也 能 迎 来 大 爆发 ， 并 早日 稳定 下 来 ， 否则 
开发 者 们 始终 性 性 不 可 终日 。 

e. 相对 于 开放 的 Web， 对 于 App Store 的 仇恨 与 日 俱 增 。 

e Redux 继续 接受 来 自 竞争 对 手 的 激烈 挑战 。 (参见 Mobx ) 

。 YARN 将 赢得 更 多 的 粉丝 。 

e "Front-end apps" ` "Thick Client apps" 、 "Static apps" ` "No Backend 
app" ^ "SPA's" ` "Front-end driven app" 这 些 理念 可 以 归结 为 一 个 概念 : "JAM Stack" ° 
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以 下 是 前 端 职称 的 描述 清单 。 前 端 开发 者 最 常用 的 称呼 是 “前 端 开 发 者 ”或 “前 端 工程 师 ”。 注 
意 ， 通 常 在 名 称 里 包含 “前 端 ”、" 客 户 端 ”、“web Ul” ` “HTML” “CSS” fe “JavaScript” 的 工作 
意味 着 就 职 者 在 HTML ^ CSS ^ DOM 和 JavaScript 方面 有 一 定 的 技术 深度 。 


前 端 开发 者 


这 是 一 个 通用 的 职称 ， 它 描述 的 是 熟悉 HTML ^ CSS ^ DOM 和 Javascript 并 在 web 平台 加 
以 实践 的 开发 者 。 


前 端 工 程 师 (又 叫 JavaScript 开发 者 或 全 栈 JavaScript 开发 者 ) 


该 职称 授予 有 计算 机 科学 、 工 程 背 景 并 能 熟练 运用 相关 技能 的 前 端 开发 者 。 该 职位 通常 要 求 
就 职 者 有 计算 机 科学 学 士 学 位 和 若干 年 软件 开发 经 验 。 当 职称 名 中 还 包含 “JS 应用” 时， 意味 
着 就 职 者 是 高 级 JS 开发 者 ， 他 拥有 高 级 编程 、 软 件 开 发 和 应 用 开发 这 些 技能 (也 就 是 有 若干 
年 构建 前 端 应 用 的 经 验 ) 


CSS/HTML 开发 者 


该 前 端 职称 描述 的 是 熟练 掌握 HTML 和 CSS 技术 的 开发 者 ， 但 对 JavaScript 和 应 用 技术 不 
作 要 求 。 


WEB 前 端 设计 师 


当 职 称 名 包含 “设计 师 ” 时 ， 意 味 着 该 设计 师 拥 有 前 端 技能 (也 就 是 HTML fe CSS) 及 专业 设 
Tt (视觉 设计 和 交互 设计 ) 技能 。 


Web/ 前 端 用 户 体验 (又 称 UL) 开发 者 /工程 师 


当 职 称 名 包含 “交互 ”或 “Ul” 时 ， 意 味 着 该 开发 者 除了 拥有 前 端 开 发 或 前 端 工程 能 力 以 外 ， 
拥有 交互 设计 能 力 。 


手机 /平板 前 端 开发 者 


当 职 称 名 包含 “手机 ”或 “平板 ” 时， 意味 着 该 开发 者 拥有 在 手机 或 者 平板 设备 (可 以 是 原生 ， 
或 者 web 平台 ， 也 就 是 在 浏览 器 里 ) 上 进行 前 端 开 发 的 经 验 。 


前 端 SEO 专家 


当 职 称 名 包含 “SEO” 时 ， 意 味 着 该 开发 者 熟悉 用 前 端 技术 设计 SEO 策略 (搜索 引擎 优化 策 
略 ) o 


前 端 访 问 性 专家 


当 职 称 名 包含 “访问 性 " 时 ， 意 味 着 该 开发 者 熟悉 使 用 前 端 技术 处 理 访问 性 的 要 求 和 标准 。 


当 职称 名 包含 “ 运 维 " 时 ， 意 味 着 开发 者 在 涉及 人 合作、 整合、 部 署 、 自 动 化 和 测试 的 软件 开发 
实践 上 有 丰富 的 经 验 。 


前 端 测试 质量 保证 (QA) 


当 职称 名 包含 “测试 ” 或 “质量 保证 " 时， 意味 着 该 开发 者 熟悉 测试 和 管理 软件 (涉及 到 单元 测 
试 、 功 能 测试 、 用 户 测试 和 A/B 测试 ) 。 


注意 ， 如 果 职称 名 中 有 “全 栈 ” 或 “Web 开发 ”， 招 聘 者 可 能 是 用 这 些 词 来 描述 负责 整体 
web/app 开发 的 职位 ， 也 就 是 同时 负责 前 端 (可 能 包含 设计 ) 和 后 端的 职位 。 


前 端 开发 者 所 使 用 的 技术 


前 端 开 发 者 所 使 用 的 技术 





图 片 来 源 : http:/www.2n2media.com/compare-front-end-development-and-back-end- 
development 


前 端 开发 者 所 使 用 的 核心 技术 有 如 下 这 些 (建议 按 顺序 进行 学 习 ) 


统一 资源 定位 符 (URLS) 

超 文本 传输 协议 (HTTP) 

超 文本 标记 语言 (HTML) 

E &13 X (CSS) 

JavaScript À 4278 à (ECMAScript 262) 

JavaScript 对 象 表示 法 (JSON) 

文档 对 象 模型 (DOM)) 

网 络 APIs (HTML5 或 者 浏览 器 APIs) 

网 络 内 容 可 达 性 指南 (WCAG) & 可 访问 的 富 互 联网 应 用 (ARIA) 


OMAN DOA F WN 一 


下 面 的 介绍 涵盖 了 以 上 技术 的 定义 ， 相 关 文 档 以 及 具体 规范 。 至 于 更 加 详尽 的 网 络 开发 规范 
请 参看 platform.html5.org ° 


超 文 本 标记 语言 (HTML) 


超 文 本 标记 语言 ， 通 常 被 称 为 HTML， 被 用 作 创 建 网 页 的 标准 标记 语言 。 网 络 浏览 器 可 
以 读 取 HTML 文件 并 且 把 它们 演 染 成 可 见 或 可 听 的 网 页 » HTML fi 述 了 一 个 网 
站 的 结构 ， 并 且 隐 含 了 其 表现 形式 ， 因 此 是 一 种 标记 语言 ， 而 非 程序 语言 。 


一 维基 百科 
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前 端 开 发 者 所 使 用 的 技术 


相关 规范 文档 : 


e W3C HTML 规范 大 全 

动态 标准 中 的 HTML 元 素 

e 全 局 属性 

W3C 的 HTML 5.2 

HTML 属性 参考 资料 

e HTML 元 素 参 考 资 料 

e HTML 语法 from the Living Standard 


AE XR (CSS) 


BARAR (CSS) 是 一 种 样式 语言 ， 用 来 描述 使 用 标记 语言 编写 的 文档 的 外 观 和 格 
式 。 尽 管 样式 表 通 常 被 用 来 改变 以 HTML 和 XHTML 的 方式 编写 的 网 页 和 用 户 界 面 的 样 
式 ， 它 也 能 被 运用 在 任何 使 用 XML 编写 的 文档 中 ， 其 中 包括 XML * SVG 和 XUL » FJ 
HTML 和 Javascript 一 样 ，CSS 是 用 以 构建 具有 视觉 冲击 力 的 网 页 和 用 户 界 面 的 基础 技 
Re 
一 维基 百科 

相关 规范 文档 : 


。 W3C CSS 规范 大 全 

e ZEAR 2.2 (CSS 2.2) 规范 
e CSS 参考 资料 

e 第 三 代 选 择 器 


文档 对 象 模 型 (DOM) 


文档 对 象 模型 (DOM) 是 一 个 跨 平台 并 且 具 有 语言 无 关 性 的 概念 ， 用 来 表示 HTML ， 
XTHML 以 及 XML 文档 中 的 对 象 以 及 这 类 对 象 的 交互 方式 。 每 份 文 档 中 按照 树 形 结构 进 
行 组 织 的 节点 ， 被 称 为 DOM 树 。 可 以 使 用 DOM 树 中 的 对 象 所 拥有 的 方法 对 该 对 象 进行 
处 理 和 操作 。DOM 的 API 规定 了 它 的 公共 接口 。 
一 维基 百科 

相关 规范 文档 : 


e 文档 对 象 模型 (DOM) 的 第 三 代 事件 规范 
e DOM 动态 标准 
e W3C DOM4 


JavaScript 编程 语言 (ECMAScript 262) 


前 端 开 发 者 所 使 用 的 技术 


JavaScript 是 一 个 高 级 的 、 动 态 的 、 弱 类 型 的 解释 性 编程 语言 ， 被 包含 在 ECMAScript 
的 语言 规范 中 。 同 HTML fe CSS 一 样 ， 它 是 万 维 网 内 容 生产 环节 必 不 可 少 的 三 种 技术 
之 一 ， 被 大 多 数 网 站 所 使 用 ， 并 且 在 不 需要 使 用 插件 的 情况 下 被 所 有 现代 的 浏览 器 所 支 
持 。Javascript 基于 原型 并 且 把 函数 视 为 头等 公民 ， 因 此 是 一 种 多 范式 的 编程 语言 ， 支 持 
面向 对 象 ， 命 令 式 以 及 函数 式 编程 风格 。 它 有 一 个 可 被 用 来 操作 文字 ， 数 组 ， 日 期 以 及 
正则 表达 式 的 API， 然 而 并 不 包含 任何 IJO， 因 此 像 建 网 ， 存 储 或 者 图 形 工具 之 类 的 功能 


就 需要 依赖 它 所 在 的 开发 环境 。 
一 维基 百科 
相关 规范 文档 : 
e ECMAScript® 2017 语言 规范 


Web APIs (HTML5 及 其 他 ) 


当 使 用 Javascript 给 网 页 编写 代码 的 时 候 ， 有 许多 的 API 可 供 使 用 。 以 下 是 一 张 关于 所 


有 在 开发 网 站 或 者 网 络 应 用 时 可 以 使 用 的 公共 接口 的 表 。 
— Mozilla 

相关 文档 : 
e Web API 公共 接口 


超 文本 传输 协议 (HTTP) 


超 文本 传输 协议 (HTTP) 是 一 个 为 分 布 式 的 、 协 作 的 、 多 媒体 的 信息 系统 指定 的 应 用 协 


议 。HTTP 是 万 维 网 数据 交流 的 基础 。 
一 维基 百科 
相关 规范 : 


e 超 文 本 传输 协议 -- HTTP/1.1 
e HTTP/2 


统一 资源 定位 符 (URL) 


统一 资源 定位 符 (URL) 也 被 称 为 网 址 ， 是 关于 资源 的 引用 ， 明 确 了 计算 机 网 络 资源 的 
地 址 以 及 检索 该 资源 的 机 制 。URL 是 统一 资源 标志 符 (URI) 的 一 种 特定 类 型 ， 尽 管 许 
多 人 认为 这 两 个 概念 可 以 互 换 。URL 表明 了 获取 所 需 资源 的 方式 ， 然 而 并 非 每 个 URI 都 
会 如 此 。URLs 通常 被 用 于 网 页 (http) ， 与 此 同时 也 被 用 作文 件 传输 (ftp) > Me 
(mailto) ， 数 据 库 接 入 (JDBC) ， 以 及 许多 其 他 的 应 用 。 


一 维基 百科 


相关 规范 : 
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前 端 开 发 者 所 使 用 的 技术 


。 统一 资源 定位 符 (URL) 
e URL 动态 标准 


JavaScript 对 象 表示 法 (JSON) 


Javascript 对 象 表示 法 是 在 异步 的 浏览 器 服务 器 交流 方式 (AJAJ) 中 所 使 用 的 主流 的 
数据 格式 ， 并 且 基 本 上 已 经 取代 XML (被 AJAX 所 使 用 ) ° BAK ISON 是 从 Javascript 
中 衍生 出 的 数据 格式 ， 但 它 实际 上 是 独立 于 语言 的 。 在 许多 的 编程 语言 中 都 有 现成 的 ， 
用 于 解析 和 生成 JSON 数据 的 代码 。JSON 数据 格式 的 规范 最 开始 是 由 Douglas 
Crockford 制定 的 ， 现 在 被 两 个 互相 竞争 的 标准 所 描述 : RFC 7159 以 及 ECMA-404 。 
ECMA 标准 更 轻 量 ， 仅 仅 规定 了 可 以 使 用 的 语法 规则 ; 而 RFC 则 基于 句法 上 的 以 及 安全 
上 的 考量 提供 了 更 细致 的 规范 。JSON 官方 的 网 络 媒体 类 型 是 application/j/son e JSON 
文件 名 的 后 级 是 json 。 


一 维基 百科 
相关 规范 : 


e 介绍 JSON 
e JSON API 
e 数据 交换 格式 ISON 


网 络 内 容 无 障碍 指南 (WCAG) & 可 无 障碍 访问 的 富 互联 网 应 用 (ARIA) 
可 达 性 讨论 的 是 对 残障 人 士 友好 的 产品 设计 ， 设 备 ， 服 务 或 者 环境 。 无 障碍 设计 通过 使 
用 对 残障 人 士 友好 的 技术 (例如 计算 机 屏幕 读 取 仪 ) 对 “直接 访问 ”( 例 如， 普通 人 的 访 
问 ) 和 “间接 访问 "进行 兼容 。 
一 维基 百科 
e 可 无 障碍 访问 的 富 互 联网 应 用 (WAI-ARIA) 现状 
e 网 络 无 障碍 倡议 (WAI) 
e 网 络 内 容 无 障碍 指南 (WCAG) 的 现状 
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图 片 来 源 : htto://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html 


假设 每 个 领域 的 前 端 开发 者 都 使 用 基础 的 高 级 HTML ` CSS ` DOM 、JavaScript、HTTP/URL 


和 浏览 器 技能 。 


除了 HTML、CSS、DOM、JavaScript、HTTP/URL 以 及 浏览 器 开发 的 专业 知识 ， 一 个 前 端 开 
发 者 还 需要 掌握 以 下 一 项 或 多 项 技能 


e 内 容 管 理 系统 (CMS) 
e Node.js 

跨 浏 览 器 测试 

e 跨 平 台 测 试 

e 单元 测试 

跨 设 备 测试 

Accessibility / WAI-ARIA 
搜索 引擎 优化 ( 亦 称 SEO) 
e 交互 或 用 户 界 面 设 计 

e 用 户 体 验 

e 适用 性 

e 电子 商务 系统 

e 门户 系统 

e 线 框 绘 制 

e CSS 布局 / Grids 

e DOM 操作 (比如 jQuery) 
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移动 Web 性 能 

负载 测试 

性 能 测试 
渐进 增强 /优雅 降级 
版 本 控制 (比如 GIT) 
MVC / MVVM / MV* 
函数 式 编 程 


数据 格式 (比如 JSON * XML) 
数据 API (比如 Restful API) 


Web tA A 


可 缩放 矢量 图 形 (t SVG) 


正则 表达 式 
内 容 策 略 
Microdata / Microformats 


任务 管理 器 ， 构 建 工 具 ， 过 程 自动 化 工具 


自 适 应 网 页 设计 
面向 对 象 的 程序 设计 
应 用 程序 构建 
模块 

依赖 管理 

包 管 理 

JavaScript 动画 
CSS 动画 

图 表 /图 形 

UI 控件 

代码 质量 测试 

代码 覆盖 率 测 试 
代码 复杂 性 分 析 
集成 测试 
命令 行 /命令 行 界面 
模板 策略 

模板 引擎 

单 页 应 用 

XHR 请 求 ( 亦 称 AJAX) 
Web /浏览 器 安全 
HTML 语义 
浏览 器 开发 工具 


『 端 开发 者 为 .… 而 开发 


前 端 开 发 者 所 编写 的 HTML ^ CSS 和 JS 代码 ， 


OS) 的 web 平台 (比如 web 浏览 器 ) 上 运行 : 


Android 

Chromium 

iOS 

OS X 

Ubuntu (or some flavor of Linux) 
Windows Phone 

Windows 


些 操作 系统 通常 运行 在 下 列 一 种 或 者 多 种 设备 上 : 


台式 机 

笔记 本 上 网 本 

手机 

平板 

电视 

手表 

其 他 东西 ( 即 汽车 、 冰 箱 、 灯 有 具 、 温 控 器 等 任何 你 能 想到 


常 运行 在 基于 下 列 某 种 操作 系统 


到 的 东西 ) 


(或 称 


前 端 开 发 者 为 ... 而 开发 


GROWTH IN THE INTERNET OF THINGS 


THE NUMBER OF CONNECTED DEVICES WILL EXCEED BY 2020 


Gor 


BILLIONS OF DEVICES 1B j 
50 S18 


2017 34.8B 
28.4B 


112B 
Q^ 


1992 loT 
1M INCEPTION 


0 
1988 1992 1996 2000 2004 2008 2012 2016 2020 





总 体 来 说 ， 前 端 技术 可 以 在 上 述 操作 系统 上 运行 ， 也 能 在 使 用 下 列 运行 时 web 平台 方案 的 设 
备 上 运行 


e web ï] bad (例如 : | 

。 无 头 浏览 器 (例如 : phantomJS) 

e nA 3 API 桥梁 的 运行 环境 , di de ATR 生 应 用 的 WebView 浏览 Ex 签 ( 想 起 
iframe) 。 通 常 WebView 应 用 包含 用 web 技术 (也 就 是 HTML、CSS S^ JS) fit 
UI ° (例如 : , pache Cordova ^ N Rl n) 

e web 技术 构建 的 原 生 应 用 > 该 类 web ao 和 合 在 含 原生 API E HR IUE 
UI 使 用 原生 部 分 〈 比 如 IOS 原生 控件 ) 而 非 web 4k K(f] de: N Saio Rean 
Native) ° 
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Aus 
EA 8*5 Ay 3s 
通常 ， 前 端 开 发 者 是 团队 中 的 唯一 角色 ， 他 们 设计 并 开发 web 34.4 ^ web 应 用 或 基于 web 技 
术 的 原生 应 用 。 
为 了 构建 专业 网 站 或 web 平台 软件 应 用 ， 一 个 基本 的 开发 团队 通常 至 少 包 含 以 下 岗位 。 


e 视觉 设计 师 (也 就 是 字体 、 颜 色 、 问 距 、 情 调 、 视 觉 概念 和 主题 ) 
e | 一 交互 设计 师 一 信息 架构 师 (也 就 是 线 框 、 所 有 用 户 交 互 和 UI| 功 能、 的 指定 ， 信 息 的 
架构 ) 


e 前 端 开发 者 (也 就 是 编写 运行 在 客户 端 / 设备 上 的 代码 ) 
e 后 端 开发 者 (也 就 是 编写 运行 在 服务 端的 代码 ) 


这 些 岗位 参照 技能 重 受 来 排序 。 通 常 前 端 开 发 者 和 后 端 开发 者 一 样 能 较 好 地 处 理 UI 交互 设 
计 。 团 队 成 员 通 过 接手 重 受 部 分 的 职责 ， 来 担任 多 于 单 人 的 职责 ， 这 并 不 是 稀 军 的 事 。 
假设 上 述 团队 是 由 项 目 经 理 或 一 些 项 目 委托 人 (也 就 是 参与 人 、 项 目 管理 者 、 项 目 经 理 等 
等 ) 来 指挥 。 
大 型 web 团队 可 能 包含 下 列 岗 位 ， 这 些 岗 位 尚未 提 及 : 

e SEO 策略 师 

e 运 维 工 程 师 

e API 开发 者 

e 数据 库 管 理 

e QA 工程师 测试 者 
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注意 : 


一 个 小 趋势 似乎 正在 发 生 :“ 全 栈 开发 者 ” 同时 担任 前 端 和 后 端 开发 者 的 职责 。 








“THE FULL STACK DEVELOPER” 
(no other developers regued ) 


El H 37$ : htto:/andyshora.com/full-stack-developers.html 


一 个 能 够 设计 和 开发 整个 web 解决 方案 的 人 ， 需 要 具备 非常 强 的 专业 技能 和 在 视觉 设计 、Ul/ 
交互 设计 、 前 端 开 发 、 后 端 开 发 等 领域 非常 丰富 的 经 验 。 能 这 四 个 领域 里 精通 一 门 或 多 门 技 
术 的 人 ， 就 已 经 可 以 说 是 非常 稀有 的 人 才 了。 


老实 说 ， 你 应 当 努力 成 为 ， 或 者 尽力 聘请 到 这 些 领域 之 一 的 一 个 专家 (例如 : 视觉 设计 、 交 
互 设计 /信息 架构 、 前 端 开发 、 后 端 开发 ) 的 专家 。 声 称 自己 在 上 述 领域 是 专家 的 人 非常 和 
少 ， 甚 至 少 的 出 奇 。 


不 过 ， 考 虑 到 JavaScript 已 经 渗透 到 了 整套 技术 栈 的 所 有 层面 (例如: React, node js, 
express, couchDB, gulp.js 等 ) ， 找 到 一 个 会 前 端 开发 和 后 端 开发 的 JavaScript 开发 者 并 没 
有 那么 难 。 通 常 ， 这 些 全 栈 开 发 人 员 只 需要 关心 JavaScript BRA AB UU (还 要 关 
心 视觉 设计 、 交 互 设计 和 CSS) 。 虽 说 在 我 看 来 依然 少 的 出 奇 ， 但 至 少 不 像 以 前 那么 难 找 。 
因此 ， 我 并 不 建议 开发 者 开始 转向 全 栈 工程 师 。 在 少数 情况 下 可 能 有 好 处 ， 但 就 职业 发 展 来 
说 ， 我 认为 前 端 开 发 工程 师 还 是 应 当 着 重 关注 前 端 相关 的 技术 。 





She ALAA 14 BU iE 


“全 栈 开 发 者 "已 经 变 为 一 个 拥有 多 种 含义 的 术语 。 
BEL. 


但 以 我 近 20 FABRA RH KEHA © 


也 就 是 说 使 用 这 个 术语 时 ， 它 可 能 包含 不 止 


分 析 一 下 下 面 的 两 个 调查 ， 从 调查 结果 可 以 看 出 大 多 数 开发 者 都 是 全 栈 开 发 者 。 


Which one of these roles are you most interested in? 


6696 out of 15624 people answered this questior 





loper 





Web Developer 





ntist / Data Engineer 


: D Developer 

€ E- Experience Designer 
B / SysAdmin 

8 Beer 

) Bc Manager 


uality Assurance Engineer 





38% 


21% 


704 11% 


10% 


114 / 6% 


275 / 4% 


219 / 3% 


199 / 3% 


191 / 3% 


104 / 2% 


El H 37$ : httos:/medium.freecodecamp.com/we-askea-15-000-people-who-they-are-and- 
how-theyre-learning-to-code-4104e29b2781#.ngcpn8gniz 
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Il. Developer Occupations 


Full-Stack Web Developer 
Back-End Web Developer 

Student 

Mobile Developer Mt Pationn} 
Desktop Developer 

Front-End Web Developer 

Other 

Enterprise Level Services Developer 
Embedded Application Developer 
DevOps 

Developer with a Statistics or 


Mathematics Background 
Executive (VP of Engineering, CTO, 
clo 


, etc.) 

Data Scientist 

System Administrator 
Engineering Manager 
Analyst 

Business Intelligence or Data 


Warehousing Expert 
Machine Learning Developer 


49,525 responses 


图 片 来 源 : http://stackoverflow.com/research/developer-survey-201 6#developer-profile- 


developer-occupations 


31 


Seo m2 
an a duas 
Hi] Faq VED T 


Za ER M 
AY Faq 面 ds 
Questions you may get asked: 


e 4 JavaScript 开发 者 都 应 当知 道 的 十 个 问题 
e 前 端 开发 面试 问题 

e Web 前 端 开发 小 测验 

e 为 前 端 开发 人 员 准 备 的 面试 问题 

e JavaScript 在 线 小 测验 


Questions you ask: 
e 开发 者 向 未 来 老板 提问 的 开源 问题 清单 
Preparing: 


© 2017 年 Web 前 端 开发 面试 前 的 准备 
e Interview Cake [$] 
e Cracking the front-end interview 
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AL xu p L Hp /二 NM 二 
末端 开发 职位 公示 


前 端 开发 职位 公示 


目前 已 经 有 大 量 的 技术 工作 岗位 存在 ， 下 面 是 目前 与 前 端 开发 最 具 相 关 性 的 职位 公示 网 站 列 
表 : 


e angularjobs.com 

e authenticjobs.com 

e careers.stackoverflow.com 
e css-tricks.com/jobs 

e codepen.io/jobs/ 

e frontenddeveloperjob.com 
e glassdoor.com 

e jobs.emberjs.com 

e jobs.github.com 

e weworkremotely.com 

e fronthat.com 


NOTES: 


如 果 你 想 找 一 个 远程 办 公 的 前 端 工作 ， 请 移 步 Remote-friendly companies 


前 端 开 发 新 资 


在 美国 ， 中 等 水 平 的 前 端 开发 者 的 平均 年 新 大 约 为 75K 美元 。 当 然 ， 在 刚 开 始 进入 前 端 开 发 
领域 时 ， 根 据 开 发 者 的 所 在 地 区 和 工作 经 验 ， 期 望 年 薪 应 该 在 35K 美元 左右 。 


$44K $53K $67K $83K $100K 





10% 25% 50% 75% 90% 
Add this chart to your site: 4$ 640px 4$ 300px 


* experience * skill * employer | job | 


Show Hourly Rate 
National Salary Data (?) $0 $50K $100K $150K 了 
Salary $43,519 - $101,731 —— : 
Bonus $392.54-$10,120 ug 
Profit Sharing $252.53 - $10,116 ug 
Commission $2,750 | 
Total Pay (?) $42,006 - $105,642 —— 


Country: United States | Currency: USD | Updated: 28 Oct 2016 | Individuals Reporting: 2,806 


图 片 来 源 : http://intersog.com/blog/chicago-tech-salary-guide-2015/ 


oF es 
VERS . 


高 级 前 端 开发 者 或 工程 师 通常 可 以 自愿 选择 办 公 地 点 〈 例 如 在 家 远程 办 公 ) 并 且 年 薪 超 过 
150K 美元 (登陆 angel.co 或 在 Stack Overflow Jobs 上 查看 年 薪 150K+ 美元 的 前 端 开 发 工 
fF) 。 
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前 端 开 发 者 是 如 何 诞生 的 


GODE ¢ DEBUG / TEYE 





图 片 来 源 : http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer- 
infographic-Secondary.jpg 


到 底 如 何 才能 成 长 为 前 端 开 发 者 ? 这 很 难说 。 现 如 今 ， 你 仍然 不 能 指望 在 大 学 毕业 的 时 候 拿 
到 一 个 关于 前 端 工程 的 学 位 。 此 外 ， 1 5 11 rae Ie 时 
的 计算 机 科学 学 位 或 图 形 设 计 学 位 的 折磨 ， 才 能 专业 地 完成 HTML ^ CSS 和 JavaScript 编码 
工作 。 在 我 看 来 ， 如 今 大 部 分 在 前 端 圈 工 作 的 人 ， 通 常 像 是 自学 成 才 或 来 自 非 认 证 机 构 、 课 
程 及 训练 营 。 


如 果 你 打算 成 为 一 个 前 端 开 发 者 ， 我 将 尽量 让 你 跟随 以 下 概括 好 的 步骤 (第 二 部 分 ，" 学 习 前 
端 开发 "， 深 入 了 解 更 多 学 习 资 源 的 细节 ) © 


1. 请 大 致 了 解 一 下 WEB 的 工作 方式 ， 并 确认 自己 了 解 以 下 概念 是 什么 ， 会 在 哪里 出 现 : 域 
名 、DNS、URL、HTTP、 网 络 、 浏 览 器 、 服 务 器 托管 、 JSON、 数 据 API、HTML、 
CSS ` DOM 和 JavaScript。 你 可 以 不 求 其 解 ， 只 需要 大 致 理解 各 部 分 是 如 何 协作 的 。 请 
关注 前 端 架 构 的 主 目 录 (high level outlines) 。 从 编写 简单 的 web 页 面 和 简要 地 学 习 前 
端 应 用 (又 叫 SPA) 开始 。 

2. €: HTML ° 

3. 学习 CSS» 

4. $$ 3] JavaScript » 


学 习 DOM 。 

学 习 JSON 和 数据 API ° 

学 习 用 户 交 互 设 计 (也 就 是 Ul E A^ UL 设计 、 用 户 习惯 设计 和 可 用 性 ) 的 基础 。 

学 习 命 令 行 界面 /命令 行 。 

学 习 软 件 工程 的 实践 (也 就 是 应 用 设计 了 架构、 模版 、Git、 测 试 、 监 控 、 自 动 化 、 代 码 

质量 、 开 发 方法 论 ) © 

10. 使 用 你 觉得 有 用 的 东西 (也 就 是 Webpack、React 和 Redux) 配置 和 定制 自己 的 工具 
箱 。 

11. 学 习 Node.js ° 


Oo 0 0o 0 


对 学 习 的 简短 建议 : 在 学 习 工 具 和 框架 前 应 当先 学 习 更 底层 的 实现 技术 ， 学 DOM 而 非 
jQuery。 学 CSS 而 非 SASS。 学 HTML 9$ 3E HAML。 学 JavaScript 而 非 CoffeeScript。 学 
JavaScript ES6 模版 而 非 Handlebars。 学 UI 模式 而 非 使 用 Bootstrap ° 


刚 起 步 的 时 候 ， 你 应 当 对 那些 把 WEB 开发 的 复杂 性 掩盖 掉 的 工具 和 框架 保持 警惕 。 高 级 工具 
和 框架 的 不 当 运 用 会 给 人 一 种 使 用 了 高 级 技能 的 表象 ， 而 拖 盖 了 这 样 的 事实 : 开发 者 对 于 基 
By fe JZ PERS PT Ha BK o 


本 书 的 剩余 部 分 会 为 你 指出 可 能 的 资源 ， 供 你 学 习 前 端 开 发 和 实践 开发 所 需 的 工具 。 在 此 过 
程 中 ， 我 们 的 前 提 假 设 是 你 不 仅 学 习 新 知识 ， 而 且 学 以 致 用 并 研究 工具 的 使 用 方法 。 有 人 说 
实践 出 真知 ， 还 有 人 说 学 以 致 用 ， 而 我 的 建议 是 ， 请 结合 以 上 两 个 观点 ， 找 到 合适 自己 的 工 
作 方式 并 践 行 它 。 但 毫 无 疑问 的 是 ， 要 结合 起 来 ! 因此 别 止 步 于 看 ， 要 实践 起 来 | 学 习 ， 实 
践 ， 学 习 ， 实 践 ， 学 习 ， 实 践 。 要 不 断 重复 两 者 ， 以 应 对 飞速 变化 的 东西 。 这 就 是 要 学 习 基 
础 知识 而 非 高 级 工具 的 原因 ， 学 习 基 础 知识 十 分 重要 。 


近来 出 现 了 很 多 非 认证 的 ， 收 费 叱 贵 的 前 端 编 码 学 院 和 训练 营 。 这 些 成 为 前 端 开发 者 的 途 
径 ， 往 往 是 由 老师 主导 ， 由 官方 讲师 制作 的 课程 ， 它 们 遵循 更 传统 的 学 习 方 式 (也 就 是 教学 
大 纲 、 测 试 、 小 测验 、 项 目 、 团 队 项 目 、 分 数 等 等 ) 。 如 果 你 正在 考虑 是 否 要 报 一 个 收费 兄 
贵 的 课程 大 纲 ， 请 牢记 你 是 在 互联 网 上 ! 你 可 以 在 网 上 免费 获得 所 有 需要 学 习 的 东西 。 然 
而 ， 如 果 你 需要 一 个 老师 ， 要 求 这 个 老师 能 教 你 如 何 获 取 并 学 习 到 站 正 免费 的 知识 ， 而 且 还 
要 对 你 的 学 习 负 责 ， 那 你 可 能 就 要 考虑 一 下 系统 化 的 课程 了 。 否 则 ， 你 学 习 任 何 专业 技术 所 
需 的 网 络 资源 ， 每 月 收费 几 百 块 的 视频 资源 会 员 ， 以 及 使 你 对 知识 怀 有 强烈 的 渴望 ， 这 些 实 
际 上 都 不 是 免费 的 。 


如 果 你 打工 现在 开始 ， 那 么 请 通过 以 下 自学 资源 选择 性 地 学 习 : 


© 2016/2017 必须 知道 的 WEB 开发 技术 [观看 ] 
e 前 端 编程 新 手指 南 [阅读 & 观看 ][ 免 费 ] 

© 如 何 成 为 前 端 开发 者 [观看 ][ 收 费 ] 

前 端 课程 [阅读 ] 

freeCodeCamp [互动 ] 

听 说 你 想 成 为 前 端 工程 师 [观看 ] 

e 启动 WEB 前 端 开发 生涯 [观看 ][ 收 费 ] 


前 端 开发 者 是 如 何 诞生 的 


e WEB 前 端 开发 : 入 门 [观看 ][ 收 费 ] 

e HTML ^ CSS ^ JS 快速 入 门 [观看 ][ 收 费 ] 
e WEB 开发 介绍 [观看 ][ 收 费 ] 

e WEB 前 端 开发 基础 [观看 ][ 收 费 ] 

e 学 习 前 端 工程 [观看 ][ 收 费 ] 

e 2015 前 端 [JS] 开 发 者 的 基准 [阅读 ] 

e 学 习 WEB 前 端 开发 [观看 ][ 收 费 ] 

e 精通 前 端 开发 [观看 ][ 收 费 ] 

e WEB 前 端 开发 者 微 学 位 [观看 ][ 收 费 ] 
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二 部 分 给 出 了 成 为 一 名 前 端 开发 者 需要 学 习 的 资源 ， 分 自学 〈 指 随时 按 自己 的 节奏 来 学 
J) 类 和 教学 ( 指 规定 次 数 和 日 期 的 正式 课堂 学 习 ) 类 两 种 。 

需要 注意 的 是 ， 不 要 因为 某 个 学 习 资 源 被 列 出 或 茶 个 学 习 类 目 包 含 在 文档 中 ， 就 代表 前 端 开 
发 人 员 要 将 它们 全 部 掌握 ， 我 不 建议 那么 做 ， 没 有 意义 。 我 提供 的 只 是 在 这 个 领域 可 能 需要 
被 掌握 的 一 些 东 西 ， 在 其 中 挑选 你 自己 的 那 部 分 专业 技能 即 可 。 


自学 RA 


本 节 重 点 介绍 适合 前 端 开 发 人 员 自 我 指导 学 习 和 自我 指导 职业 发 展 的 免费 及 付费 资源 (视频 
课程 、 abe) o ° 


以 下 所 提 及 的 资料 包括 免费 和 付费 资料 ， 其 中 付费 资料 将 使 用 [8] 标注 。 


作者 相信 ， 任 何 有 决心 且 愿 意 付 出 的 人 都 能 够 通过 自我 学 习 成 为 一 名 前 端 开发 者 。 你 只 需要 
一 台 连 接 到 互联 网 的 计算 机 ， 以 及 一 些 用 来 购买 书籍 和 视频 课程 的 经 费 。 


下 面 是 一 些 视频 学 习 网 站 (以 技术 为 重点 ) ， 我 通常 也 推荐 从 这 些 站 点 中 寻找 学 习 内 容 : 


e codecademy.com 
e codeschool.com 
e egghead.io 

e eventedmind.com 
e Frontend Masters 
e Freecodecamp 

e Khan Academy 

e laracasts.com 

e lynda.com [E X SR 9] > Ji X A RE] 

e mijingo.com 

e pluralsight.com [注意 甄别 ， 质 量 参差 不 齐 ] 
e Treehouse 

e tutsplus.com 

e Udacity [注意 甄别 ， 质 量 参差 


M 
党 


关于 互联 网 WEB 


关 


于 互联 网 “WEB 


互联 网 是 使 用 互联 网 协议 族 (TCP/IP) 连接 全 球 上 亿 设 备 的 计算 机 网 络 系统 。 是 由 从 
地 方 到 全 球 范 围 内 几 百 万 个 私人 的 、 学 术 界 的 、 企 业 的 和 政府 的 网 络 所 构成 ， 通 过 电 
子 ， 无 线 和 光纤 网 络 技术 等 等 一 系列 广泛 的 技术 联系 在 一 起 。 互 联网 承载 着 规模 可 观 的 


言 息 源 和 服务 ， 例 如 相互 关系 的 超 文本 文件 和 万 维 网 (WWW) 应 用 ， 电 子 邮件 ， 电 话 


和 点 对 点 文件 共享 网 络 。 


一 维基 百科 


什么 是 互联 网 ? [视频 ] 

互联 网 是 如 何 工作 的 ? -W3C [文章 ] 

互联 网 是 如 何 工 作 的 ? - Stanford Paper [X X] 
互联 网 是 如 何 工作 的 ? [视频 ] 

互联 网 是 如 何在 五 分 钟 内 工作 的 [视频 ] 

网 络 是 如 何 工作 的 [视频 ][ 付 费 ] 

什么 是 互联 网 ? 或 “ 爱 咋 咋 地 ， 都 一 样 " [文章 ] 
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学 习 Web 浏览 器 


Web:x] 5 2$ (通常 被 称 为 浏览 器 ) 是 一 个 在 万 维 网 上 检索 、 呈 现 、 遍 历 信 息 资源 的 应 用 软 
件 。 信 息 资 源 是 由 统一 资源 标识 符 (URI/URL) 来 标识 的 ， 可 以 是 网 页 、 图 片 、 视 频 或 其 
他 内 容 。 资 源 中 存在 的 超 链接 能 够 使 用 户 轻 松 地 将 浏览 器 导航 到 相关 资源 。 虽 然 浏览 器 
主要 目的 是 使 用 万 维 网 ， 它 们 同样 也 可 被 用 来 获得 专用 网 络 中 Web 服 务 器 所 提供 的 信 
息 ， 或 者 文件 系统 中 的 文件 。 


一 维基 百科 


1. Chrome ($1 &: Blink + V8) 

2. Firefox (引擎 : Gecko + SpiderMonkey) 

3. Internet Explorer (5| #: Trident + Chakra) 
4. Safari (4] €: Webkit + SquirrelFish) 


StatCounter Global Stats 
Top 12 Browser Versions Combining Chrome and Firefox (5+) from 1 Jan to 1 Dec 2016 





Chrome (all) 


Firefox 5+ 


iPhone 0 


IE 11.0 


Opera 0 





m 
mM 


Android 0 


Safari iPad 


r 
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UC Browser 10.7 
UC Browser 10.9 1.0196 
Edge 13 0.96% 


UC Browser 10.8 0.93% 


E A [. ] nnd 


Samsung Internet 4.0 0.9296 
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50% 


图 片 来 源 : http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly- 
201501-201601-bar 


浏览 器 和 Web 技 术 的 演进 〈 即 API) 


e evolutionoftheweb.com [阅读 ] 
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学 习 Web 浏览 器 


e Web 浏 览 器 的 时 间 轴 [阅读 ] 
最 常用 的 Headless( 无 GUI) 浏 览 器 : 


e PhantomJS (4] €: Webkit + SquirrelFish) 
e SlimerJS (4] €: Gecko + SpiderMonkey) 
e TrifleJS (引擎 : Trident + Chakra) 


浏览 器 是 如 何 工作 的 : 


e 了 解 关于 浏览 器 和 Web 的 20 件 事情 [阅读 ] 

e 加 速 你 的 CSS : 浏览 器 如 何 布局 网 页 [阅读 ] 
浏览 器 如 何 工作 : 现代 浏览 器 的 幕后 原理 [阅读 ] 
浏览 器 是 如 何 卜 正 演 染 一 个 网 站 的 ?了 [MA] 

。 什么 T a 
每 位 前 端 开发 者 必须 知道 的 网 页 泻 染 技 能 [阅读 ] 





Browserengine 








图 片 来 源 : http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 


浏览 器 优化 
e 浏览 器 演 染 优化 [观看 ] 
。 网 站 性 能 优化 [观看 ] 

对 比 浏览 器 
e Web 浏 览 器 的 比较 [阅读 ] 


We 器 


| W,z25 Hacks 
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e browserhacks.com [阅读 ] 
浏览 器 开发 


在 过 去 ， 前 端 开 发 者 要 花费 很 多 时 间 写 代码 来 兼容 几 种 不 同 浏览 器 。 与 现在 相 比 ， 这 曾 是 一 
个 巨大 的 问题 。 现 在 ， 第 三 方 工具 (例如 : jQuery、React、Post-CSS、Babel 等 等 ) 结合 现 
eee HORTLE RAWLS > bei 


大 多 数 现代 浏览 器 的 最 新 版 本 被 认为 是 常 青 浏览 器 。 也 就 是 说 ， 从 理论 上 讲 他 们 应 该 不 需要 
用 户 操作 自动 更 新 。 自 动 更 新 浏览 器 的 这 一 举措 已 经 反 过 来 淘汰 了 不 自动 更 新 的 旧版 浏览 


如 今 ， 大 多 数 前 端 开 发 人 员 使 用 Chrome 和 "Chrome” 开 发 工具 ”开发 前 端 代码 。 然 而 ， 最 常用 
的 现代 浏览 器 都 提供 开发 工具 。 使 用 哪个 用 于 开发 是 一 个 主观 的 选择 。 最 重要 的 问题 是 了 解 
你 必须 支持 哪个 浏览 器 ， 哪 个 设备 ， 然 后 适当 地 进行 测试 。 


建议 : 


1 我 建议 使 用 Chrome， 因 为 它 的 开发 者 工具 在 持续 改进 ， 并 且 包 含 了 最 强大 的 功能 。 


学 5) IR, 2 A 统 , ( 又 m] DNS 


学 习 域 名 系统 (L DNS) 


域名 系统 (DNS) 是 按 层 级 划分 的 分 布 式 命名 系统 ， 用 以 访问 连接 到 互联 网 或 私有 网 络 中 的 
计算 机 、 服 务 、 资 源 。 它 通过 域名 关联 各 种 信息 ， 这 些 域名 被 分 配 至 每 个 参与 实体 
(participating entities) 上 。 它 最 突出 的 特点 在 于 : 将 便于 人 们 记忆 的 域名 解析 成 数字 表示 的 
IP 地 址 ，IP 地 址 则 符合 全 世界 计算 机 服务 器 和 设备 的 需求 。 网 域名 称 系统 是 大 多 数 互 联网 服 
务 功能 的 重要 组 成 部 分 ， 因 为 它 是 互联 网 主要 的 地 址 录 服 务 。 


— Wikipedia 
: If your ISP name server doesn't know 
? 
Where is x.com Browser asks your it then asks the root name server ' 
ISP name server for where to find the authoratative name 
<” the domain's IP server for the domain. 


address. | 


| 2 
2 


Browser ISP Root 
Machine Name Servers Name Servers 
/ The ISP name server then The ISP name server then 
: sends the IP address back to asks for the IP address 
x.com's Browser the browser. from the authoratative 
website uses IP to name server. 
server request 
sends web web page 
pae to from 
e a 
hiiia oe The authoratative name 
Dere, server then sends the IP 
server, address back to the ISP 
name server. E 


7 4 
E 
" 


Website Authoratative 


Name Servers 
Server 


图 片 来 源 : http:/www.digital-digest.com/blog/DVD Guy/wp- 
content/uploads/2011/11/how_dns_works.jpg 


e 解释 DNS [观看 ] 
e DNS 如 何 运 行 [ 阅 读 ] 
e 互联 网 :IP 地 址 和 DNS [MA] 
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学 习 域 名 系统 (又 叫 DNS) 
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学 习 HTTP/Networks (包括 CORS 和 WebSockets ) 


学 习 HTTP/Networks (包括 CORS 和 
WebSockets ) 


HTTP - 超 文本 传输 协议 (HTTP) 是 分 布 式 、 协 作 、 超 媒体 信息 系统 的 应 用 协议 。HTTP 
是 万 维 网 数据 通信 的 基础 。 


— Wikipedia 

CORS - 跨 域 资源 共享 (CORS) 是 一 种 机 制 ， 允 许 网 页 向 非 本 域 下 的 资源 提供 者 请 求 受 
限制 的 资源 (比如 字体 ) 。 

— Wikipedia 

WebSockets - WebSocket 是 一 种 在 单个 TCP 连接 上 进行 全 双 工 通讯 的 协议 。 


WebSocket 通 信 协 议 于 2011 年 被 I|ETF 以 RFC 6455 的 形式 标准 化 了 ，Web IDL 中 的 
WebSocket API 也 被 W3C 定 为 标准 。 


— Wikipedia 
HTTP 规范 

e HTTP/2 

e 起 文本 传输 协议 -- HTTP/1.1 
HTTP 


e 高 性 能 浏览 器 网 络 : 关于 网 络 和 Web 性 能 开发 者 们 应 该 的 内 容 [阅读 ] 
e HTTP : 最 终 指 南 (权威 指南 ) [阅读 ][ 付 费 ] 

e HTTP/2 常见 问答 [阅读 ] 

e HTTP 基本 原理 [观看 ][ 付 费 ] 

。 HTTP/2 基本 原理 [观看 ][ 付 费 ] 

e HTTP : Web 开 发 者 必须 掌握 的 协议 -第 一 部 分 [阅读 ] 

e HTTP : Web 开 发 者 必须 了 解 的 协议 -第 二 部 分 [阅读 ] 

e HTTP 简介 [阅读 ] 


HTTP 状态 码 


。 HTTP 状态 码 
。 60 秒 学 会 HTTP 状 态 码 [观看 ] 


CORS 规范 


e 跨 域 资源 共享 


学 习 HTTP/Networks (包括 CORS 和 WebSockets ) 


CORS 


e CORS 实战 [阅读 ][ 付 费 ] 
e HTTP 访问 控制 (CORS ) [阅读 ] 


WebSockets 


e 用 websockets 连 接 网 络 [观看 ] 
e WebSocket: 轻 量 级 客户 端 -服务 端 通信 [阅读 ][ 付 费 ] 
e WebSocket 协 议 [阅读 ] 
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学 习 网 页 寄存 (通称 虚拟 主机 ) 


学 习 网 页 寄存 (通称 虚拟 主机 ) 


网 页 寄存 服务 是 指 一 类 Internet 寄存 服务 ， 该 服务 允许 组 织 和 个 人 将 他 们 的 站 点 连接 至 
互联 网 以 供 他 人 访问 。 网 页 寄存 商 在 他 们 的 数据 中 心 提供 可 供用 户 购 买 或 租用 的 主机 ， 
同时 将 这 些 主机 接 入 互联 网 。 网 页 寄存 商 也 可 以 为 数据 中 心中 放置 的 其 他 公司 服务 器 提 
供 接 入 互联 网 的 服务 ， 这 种 服务 称 作 主机 托管 (colocation) ， 亦 称 Housing in Latin 


America or France. 


一 维基 百科 


a You Website Vistiors 
Upload your files to i $ 
si web host à ; 
je 





ed ca YourDomain-Name.com 


Web Host Visitors type in your 
website URL 


El H 37$. : htto://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg 


入 门 学 习 : 
e 网 页 寄存 终极 指南 [read] 
e 网 页 寄存 入 门 指南 [read] 
e 网 页 寄存 傻瓜 教程 [read][$] 


学 习 前 端 开发 


学 习 前 端 开 发 


e 前 端 [JS] 开 发 者 的 基准 线 : 2015 [阅读 ] 

e 成 为 一 名 前 端 Web 开发 者 [观看 ][$] 

© 成 为 一 名 web 开发 者 的 基本 标准 [阅读 ] 

e 前 端 Web 开发 基础 [观看 ][$] 

e freeCodeCamp [互动 ] 

e 前 端 课 程 [阅读 ] 

e 前 端 开发 精通 [观看 ][$] 

e 前 端 Web 开发 微 学 位 [观看 ][$] 

e 前 端 Web 开发 职业 起 步 [观看 ][$] 

e 前 端 Web 开发 : 开始 [RAIS] 

。 HTML5、CSS 和 JavaScript 的 前 端 Web 开发 快速 起 步 [观看 ][$] 
e 前 端 Web 开发 : Big Nerd Ranch 指引 [阅读 ][$] 
e 前 端 指引 [阅读 ] 

。 Web 开发 介绍 [观看 ][$] 

e Isobar 前 端 编 码 标准 [阅读 ] 

e 简洁 前 端 工程 [LAYS] 

e 学 习 前 端 Web 开发 [观看 ][$] 

e 设计 前 端 JS 应 用 [观看 ] 

e 听 说 你 想 当 前 端 工程 师 [观看 ] 





常用 前 端 时 讯 、 新 闻 媒 体 和 播客 : 


e Web 开发 大 舞台 

e 前 端 开发 技术 周刊 
e 前 端 开 发 欢乐 时 光 
e 前 端 开 发 5 分 钟 新闻 
。 前 端 开发 前 党 

e 专注 前 端 

e 前 端 时 讯 

e 移动 Web 技术 周刊 
e 开放 式 Web 平台 每 日 摘要 
e Pony Foo 周刊 

e 专家 脱口 秀 

e Web 前 沿 

e Web 平台 播客 


e Web 工具 每 周一 刊 
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学 习 用 户 界面 /交互 设计 


学 习 用 户 界面 /交互 设计 


用 户 界面 设计 - 用 户 界面 设计 (UD ， 或 者 说 用 户 界面 工程 ， 是 指 基于 用 户 体验 最 优 
化 ， 对 机 器 以 及 软件 ， 例 如 计算 机 ， 家 庭 电 器 ， 移 动 设备 以 及 其 他 电子 设备 的 用 户 界面 
所 进行 的 设计 。 用 户 界 面 设计 的 目标 是 根据 用 户 的 使 用 目的 〈 以 用 户 为 中 心 的 设计 ) ， 
使 交互 尽 可 能 简单 而 有 效率 。 


一 维基 百科 


交互 设计 模式 - 设计 模式 是 对 于 常见 设计 问题 解决 方案 的 一 种 正式 的 总 结 。 这 是 建筑 师 
Christopher Alexander 在 进行 城市 规划 和 建筑 设计 的 时 候 提出 的 概念 ， 已 经 在 很 多 其 他 
的 领域 中 被 引用 ， 例 如 教育 ， 机 构 组 建 和 软件 设计 。 


一 维基 百科 


用 户 体 验 设计 - 用 户 体验 设计 (UXD 或 者 UED RA XD) 是 通过 提升 产品 在 同 用 户 互 动 
过 程 中 的 可 用 性 ， 可 达 性 和 愉悦 度 ， 从 而 提升 用 户 满意 度 的 过 程 。 用 户 体验 设计 包括 传 
统 的 人 机 交互 设计 (HCI) ， 但 不 仅 限于 此 一 一 它 涉 及 产品 或 服务 的 受众 所 能 够 感知 到 
的 方方面面 。 


一 维基 百科 


人 机 交互 - 人 机 交互 《HCI) 研究 计算 机 技术 的 设计 和 使 用 方法 ， 尤 其 对 人 机 交互 起 到 桥 
梁 作用 的 图 形 界面 。HCI 方向 的 研究 者 既 关 心 人 类 同 计算 机 交互 的 方式 ， 也 关心 能 够 使 
这 种 交互 变 得 更 为 美观 新 颖 的 设计 技术 。 


一 维基 百科 
为 了 使 大 家 有 能 力 创建 可 用 的 用 户 界 面 ， 我 会 推荐 以 下 的 权威 文档 : 


e 界面 : 交互 设计 原理 [阅读 ][ 增 值 付费 ] 

© 为 黑客 而 设计 : 逆向 工程 之 美 [阅读 ][ 增 值 付费 ] 

e 献 给 非 专 业 设 计 师 的 设计 教程 [观看 ] 

e 设计 图 形 界 面 [阅读 ][ 增 值 付费 ] 

e 设计 网 络 图 形 界面 : 高 级 交互 设计 原理 和 模式 [阅读 ][ 增 值 付费 1 
e 别 让 我 思考 : 关于 网 络 可 用 性 的 常识 [阅读 ][ 增 值 付费 ] 


5 
ep 


HTML 


=> 


x 


HTML 和 CSS 


7] HTML 和 CSS 





构 语义 ， 随 着 线索 的 呈现 ， 使 之 成 为 标记 语言 而 不 是 编程 语言 。 


一 维基 百科 


超 文 本 标记 语言 ， 通 常 被 称 为 HTML, 是 一 种 用 于 创建 网 页 的 标准 标记 语 
。 网 页 浏览 器 可 以 读 取 HTML 文 件 并 将 其 泻 染 成 可 视 化 网 页 。HTML 描述 了 网 页 的 结 


CSS 一 一 A & A AR (CSS) 是 一 个 层 登 样式 表 语 言 ， 用 来 描述 用 标记 语言 来 写 的 外 观 


和 格式 。 尽 管 经 常 都 是 用 HTML 和 XHTML 来 改变 网 页 和 用 户 界 面 的 样式 ， 该 语 


=> 


Pr 


应 用 于 任何 类 型 的 XML 文档 ， 包 括 原生 的 XML ^ SVG f» XUL ° RI HTML 和 
JavaScript > CSS 是 大 多 数 网 站 的 基础 的 技术 ， 用 来 创建 炫 酷 的 网 站 ，wWeb 应 用 程序 的 


用 


户 界面 和 很 多 移动 应 用 的 用 户 界面 。 


一 维基 百科 


就 像 建造 房子 一 样 ， 可 以 认为 HTML 用 来 搭建 框架 CSS 用 来 绘画 和 


综合 


掌握 


学 习 : 


CSS 里 的 绝对 居中 [阅读 ] 

codecademy.com HTML 和 CSS [交互 ] 

CSS 定位 [视频 ][ 收 费 ] 

前 端 web 开发 : 开始 使 用 [视频 ][ 收 费 ] 

前 端 Web 开 发 HTML5，CSS 和 JavaScript 快速 入 门 [视频 ][ 收 费 ] 
HTML 和 CSS : 设计 和 构建 网 站 [阅读 ][ 收 费 ] 
HTML 文档 流 [视频 ][ 收 费 ] 

HTML 精通 : 语义 、 规 范 和 样式 [阅读 ][ 收 费 ] 
互联 网 很 难 [阅读 ] 

HTML/CSS 简介 : 制作 网 站 [视频 ] 

学 习 编写 HTML 和 CSS [阅读 ] 

学 习 CSS 布局 [阅读 ] 

MarkSheet [阅读 ] 

语义 HTML : 如 何 设计 网 页 [视频 ] 

结实 的 HTML 表单 结构 [视频 ] 

了 解 CSS $1378 [视频 ] 

弹性 网 页 布局 [阅读 ] 


CSS: 


Flexbox 完整 指南 [阅读 ] 


at 


K 


饰 。 


可 以 
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= 2] HTML 和 CSS 


CSS 34€ [交互 ] 

从 CSS4 到 CSS1 的 CSS 选择 器 [阅读 ] 

CSS 揭秘 : 更 好 的 解决 常见 的 网 页 布局 问题 [阅读 ][ 收 费 ] 

CSS3 [阅读 ] 

深入 CSS3 [视频 ][ 收 费 ] 

什么 是 Flexbox ? ! 简单 免费 的 20 个 视频 教程 帮助 你 掌握 CSS Flexbox [视频 ] 


参考 文献 /| 说明: 


CSS 触发 器 ... 布局 、 样 式 和 混合 使 用 的 游戏 , and Composite 
cssreference.io 

cssvalues.com 

Chrome 浏览 器 的 默认 CSS 

Head - 可 以 在 你 的 文档 的 header 中 的 所 有 内 容 的 列表 
HTML 属性 参考 

MDN CSS 参考 

MDN HTML 元 素 参考 


词汇 表 : 


CSS 词汇 表 一 一 CSS 覆盖 样式 、 属 性 和 选择 器 的 编程 参考 
HTML 元 素 的 HTML 词汇 表 编 程 参考 


标准 /规范 : 


所 有 的 W3C CSS 规范 
所 有 的 W3C HTML 规范 
CSS 2 级 修订 2 (CSS 2.2) 规范 


CSS 索引 一 一 由 CSS 规范 定义 的 属于 列表 
来 自 现存 标准 的 HTML 元 素 
全 局 属性 


HTML 语法 from the Living Standard 
来 自 W3C 的 HTML 5.2 
3 级 选择 器 


CSS 架构 设计 : 


元 素 设 计 [阅读 ] 

BEM 

ITCSS 

OOCSS [阅读 ] 

SMACSS [阅读 ][ 收 费 ] 

适用 于 CSS 的 可 扩展 模块 化 体系 结构 ( SMACSS ) [视频 ][ 收 费 ] 
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& 3 HTML f» CSS 


e SUIT CSS 
* [SCSS 


设计 /编写 规范 : 


e CSS 编码 指南 [阅读 ] 

e css-architecture 

e cssguidelin.es [阅读 ] 

e Idiomatic CSS [阅读 ] 

e MaintainableCSS [阅读 ] 

e 开发 有 弹性 的 、 耐 用 的 和 可 持续 的 HTML 和 CSS 标准 [阅读 ] 


HTML/CSS 简报 : 


e CSS 周报 


。 RE AT 3 
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学 习 搜索 引擎 优化 


学 习 搜 索引 擎 优化 


搜索 引擎 优化 ( SEO ) 是 一 种 针对 搜索 引擎 非 付 费 (又 被 称 为 自然 检索 、 有 机 检索 ) 或 付 
费 结果 的 处 理 过 程 ， 它 会 影响 到 网 站 及 网 页 在 这 些 结果 中 的 可 见 度 。 通 常 来 说 ， 当 一 个 
网 站 更 早 的 出 现在 搜索 结果 中 (又 或 者 在 搜索 结果 中 的 排序 更 靠 前 ) ， 就 会 有 更 多 的 搜 
索引 擎 使 用 者 对 它 进行 访问 。SEO 可 以 针对 不 同 的 搜索 ， 包 括 图 像 搜索 、 本 地 搜索 、 视 
频 搜 索 、 学 术 搜 索 、 新 闻 搜 索 和 特定 行业 的 重 直 搜索 引擎 。 


— Wikipedia 
综合 学 习 : 


e 谷歌 搜索 引擎 优化 入 门 指南 [阅读 ] 

e SEO 基本 原理 — David Booth [视频 ][ 收 费 ] 
SEO 基本 原理 一 Paul Wilson [视频 ][ 收 费 ] 
SEO 初学 者 教程 一 一 2016 [阅读 ] 

e 给 网 站 设计 师 的 SEO 建议 [视频 ][ 收 费 ] 
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学 习 JavaScript 


学 习 JavaScript 


JavaScript 是 一 种 高 级 的 、 动 态 的 、 无 类 型 的 、 解 释 型 的 的 编程 语言 。 它 是 万 维 网 内 容 制 
作 的 ， 除 了 HTML 和 CSS 以 外 的 三 大 基本 技术 之 一 ; 大 多 数 网 站 都 在 使 用 它 ， 并 且 所 有 现 
代 的 Web 浏 览 器 无 插件 的 支持 。JavaScript 是 基于 原型 并 具备 极 好 的 功能 ， 这 使 它 成 为 一 
种 多 范式 的 语言 ， 支 持 面向 对 象 、 指 令 式 和 函数 式 编程 风格 。 它 提供 文字 、 数 组 、 日 期 
和 正则 表达 式 的 操作 API， 但 不 支持 任何 MO 相关 的 ， 例 如 网 络 、 存 储 或 图 形 设 备 ， 这 取 
RF EATR A bJ EMRE © 


一 维基 百科 
入 门 学 习 : 


e codecademy.com JavaScript [互动 ] 
e JavaScript 第 一 步 [阅读 ] 

e 创建 JavaScript 代码 块 [阅读 ] 

e JavaScript Enlightenment [阅读 ] 

e JavaScript 对 象 基 础 [阅读 ] 

e JavaScript 编程 精 解 [阅读 ] 


e Speaking JavaScript [阅读 ] 

e 你 不 知道 的 IS: AT] [阅读 ] 

e 你 不 知道 的 JS: 类 型 和 语法 [阅读 ] 

e 你 不 知道 的 JS: 作用 域 和 闭 包 [阅读 ] 

e JavaScript 中 'this' 的 大 致 解释 [阅读 ] 
e 你 不 知道 的 JS: this 和 对 象 原型 [阅读 ] 


e Ai ES6 [阅读 ] 

e 每 个 人 都 能 学 ES6 PLATS] 

e Exploring ES6 [阅读 ] 

e 你 不 知道 的 JS: ES6 及 其 上 [阅读 ] 

e Understanding ECMAScript 6 [阅读 ] 
e ES6 精粹 [观看 ][$] 

e Exploring ES2016 and ES2017 [阅读 ] 
e JS 正则 表达 式 [阅读 ] 

使 用 正则 表达 式 [观看 ][$] 

你 不 知道 的 JS: 异步 和 性 能 [阅读 ] 
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学 习 JavaScript 


e JavaScript Promises [阅读 ][$] 
e 测试 驱动 的 JavaScript 开发 [阅读 ][$] 


。 JS 流言 [阅读 ] 
JavaScript 函数 式 编程 : 


e 函数 式 编 程 术 语 

e JavaScript 中 的 函数 式 编程 [观看 ] 

e Functional-Light-JS [阅读 ] 

Functional Programming in JavaScript [阅读 ] 
e JS 函数 式 编程 指南 [阅读 ] 

e JavaScript Allongé [阅读 ][$] 

JS 有 函数 式 编程 的 核心 [观看 ][$] 
Functional-Lite JavaScript [观看 ][$] 


参考 文档 : 


e MDN JavaScript 参考 
e MSDN JavaScrip 参考 


术语 表 : 


e JavaScript 5 # 
e JavaScript 术语 表 
e JavaScript faj A 8t 45 


标准 一 规范 : 


。 ECMAScript@ 2015 语言 规范 
。 ECMAScript® 2016 语言 规范 
。 ECMAScript@ 2017 语言 规范 
e ECMA262 的 状态 、 进 程 和 文档 


样式 : 


e Airbnb JS 样式 指南 
e JavaScript 标准 样式 
e JavaScript 半 标 准 样式 


JS 报纸 、 新 闻 & 简 报 : 


e Echo JS 
e ECMAScript Daily 
e ES.next News 
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学 习 JavaScript 


FiveJS 

JavaScript Air 
JavaScript Jabber 
JavaScript Kicks 
JavaScript Live 
JavaScript Weekly 
JavaScript.com 


弃 用 的 JS #7 TR: 


Crockford - 第 一 章 
Crockford - 第 二 章 
Crockford - 第 三 章 : 
Crockford - 第 四 章 


Crockford - 第 五 
Crockford - 第 六 章 


+ 


: 历史 那些 事 [观看 ] 

: JS 的 产生 [观看 ] 
函数 [观看 ] 

: Ajax 的 变化 [观看 ] 

: 安全 和 性 能 [观看 ] 

: 循环 [观看 ] 


JavaScript 模式 [阅读 ][$] 
JavaScript 面向 对 象 精 要 [阅读 ][$] 
JavaScript 模块 [阅读 ] 


函数 式 编程 : 用 Underscore.js 来 介绍 函数 式 编程 [阅读 ][$] 


js 和 web 精 粹 [观看 ][$] 
高 性 能 JavaScript [阅读 ][$] 
先进 的 JavaScript [观看 ][$] 
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e SA SVG 动画 [付费 ][ 视 频 ] 

e 探索 Web 动画 [付费 ][ 视 频 ] 

e 使 用 Snap.svg 制作 动 效 [付费 ][ 视 频 ] 

e CSS3 和 HTML5 中 的 动画 效果 [付费 ][ 视 频 ] 

e 用 CSS 创建 动 效 [阅读 & 视频 ] 

e 现实 生活 中 的 CSS 动画 [付费 ][ 视 频 ] 

e HTML5 + JavaScript 动 效 基础 原理 [付费 ][ 阅 读 ] 
e 学 习 运 用 JavaScript 制作 动 效 [阅读 & 视频 ] 
动 效 现 状 2015 [视频 ] 

Javascript 动画 制作 : 开发 与 设计 [付费 ][ 阅 读 ] 


标准 规范 : 


e Web 动画 效果 


AN 
OU 


学 习 DOM ` BOM 和 jQuery 


= 2] DOM ` BOM 和 jQuery 


DOM - 文档 对 象 模型 (DOM) 是 一 个 路 平台 的 、 独 立 于 语言 的 约定 ， 能 以 对 象 的 形式 对 
HTML » XHTML 和 XML 文档 进行 展示 和 交互 。 每 一 个 文档 的 节点 被 放 到 一 个 树 形 结构 
中 ， 这 棵 树 被 称 为 DOM 树 。 


一 维基 百科 


BOM - 浏览 器 对 象 模型 (BOM) 是 一 个 浏览 器 规范 约定 ， 涉 及 到 网 络 浏览 器 暴露 出 来 的 所 
有 对 象 。 不 像 文档 对 象 模型 ，BOM 并 没有 实现 的 标准 和 严格 的 定义 ， 所 以 浏览 器 厂 
怎么 实现 BOM 都 可 以 。 


一 维基 百科 


jQuery - jQuery 是 一 个 跨 平台 的 JavaScript 库 ， 为 了 简化 客户 端 HTML 中 的 脚本 编写 而 
诞生 。jQuery 如 今 是 最 流行 使 用 的 JavaScript 库 ， 排 名 前 1000 万 的 高 访问 量 网 站 中 ， 
有 65% 都 在 使 用 它 。 


一 维基 百科 


最 理想 的 学 习 路 径 ， 但 也 是 最 难 的 ， 就 是 先 学 习 JavaScript， 然 后 学 DOM， 然 后 jQuery。 但 
还 是 要 确保 你 做 的 事 有 意义 。 大 部 分 前 端 开 发 者 是 在 初次 学 习 jQuery 的 时 候 ， 顺 带 着 学 习 
JavaScript 和 DOM 。 但 无 论 你 选 哪 一 条 路 ， 都 不 能 将 JavaScript、DOM 和 jQuery 当做 一 个 
RERA ° 


普通 学 习 资 源 : 


e Codecademy.com jQuery [观看 ] 

e 文档 对 象 模型 [阅读 ] 

e HTML/JS: Ae TRES 页 面 [观看 ] 

e HTML/JS: 通过 jQuery 打造 可 交互 页 面 [观看 ] 
e jQuery 启蒙 [阅读 ] 


进 阶 : 


e 高 级 DOM 编程 ; 动态 Web 设计 技术 [阅读 ][$] 

e jQuery & 纯 DOM 脚本 编程 的 高 级 JS 基础 [MATS] 
e Douglas Crockford: 麻烦 的 API - DOM 理论 [观看 ] 
。 DOM 启蒙 I 或 者 在 线 免费 阅读 

修正 jQuery 常见 Bug [观看 ][$] 

无 jQuery 的 JavaScript [观看 ][$] 

jQuery 小 贴 士 和 小 技巧 [观看 ][$] 
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学 习 DOM ` BOM 和 jQuery 


参考 /文档 : 


jQuery 文档 

事件 

DOM 浏览 器 支持 度 
DOM 事件 浏 RAR 
HTML 接口 浏览 器 支持 度 
MDN 文档 对 象 模型 
MDN 浏览 器 对 象 模型 

MDN 文档 对 象 模型 

MDN 事件 一 览 表 

MSDN 文档 对 象 模型 (DOM) 


标准 /规范 : 


文档 对 象 模 型 (DOM) Level 3 事件 规范 
文档 对 象 模 型 (DOM) 技术 报告 

DOM 最 新 标准 

W3C DOM4 
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学 习 网 页 字体 & 图 标 


学 习 网 页 字体 & 图 标 


页 排版 是 指 在 万 维 网 上 字体 的 使 用 。 在 第 一 次 产生 HTML 的 时 候 ， 每 个 网 页 

peii 道 地 控制 了 字体 和 样式 。 直 到 1995 年 ， 网 景 引入 了 <font> ve ， 才 有 机 制 
来 控制 单 网 页 的 字体 显示 ，HTML 3.2 标准 随即 规范 了 这 一 行为 。 然 而 ， 使 用 者 必须 在 电 
脑 上 安装 标签 声明 的 字体 或 有 降级 字体 ， 例 如 浏览 器 默认 的 sans-serif 或 单 空格 字 型 ， 
会 被 蔡 代 使 用 。1996 年 ， 第 一 个 CSS 规范 发 布 ， 也 提供 了 相同 的 功能 。 1998 年， 
CSS2 规范 发 布 了 ， 并 试图 通过 添加 字体 匹配 、 合 成 和 下 载 来 改进 字体 选择 的 过 程 。 可 
是 这 些 技巧 并 没有 很 大 用 处 ， 于 是 在 CSS2 中 移 除 了 。 然 而 ，IE 在 1997 年 发 布 的 4.0 
版 本 中 增加 了 对 字体 下 载 的 支持 。[1] 后 来 ， 在 CSS3 的 字体 模块 中 包含 了 字体 下 载 ， 从 
那 时 起 ，Safari 3.1 > Opera 10 和 Mozilla Firefox 3.5 也 实现 了 这 个 功能 。 这 增加 了 网 页 
排版 和 字体 下 载 用 法 的 趣味 性 。- 维基 百科 


浏览 We ge zu 


综合 学 习 : 

canis TAN: Rs 页 字体 的 完美 字体 样式 [阅读 ] 
° a 来 认识 网 页 字体 [阅读 ] 

° Ae 式 排 版 [观看 ][$] 

e 网 页 排版 [观看 ][$] 


学 习 可 访问 性 相关 知识 


学 习 可 访问 性 相关 知识 


可 访问 性 是 指针 对 于 残疾 人 相关 的 产品 、 设 备 、 服 务 或 环境 的 设计 。 可 访问 性 设计 的 概 
念 不 仅 能 确保 “直接 访问 ” (也 就 是 说 ， 无 需 任 何 辅助 ) ， 也 提供 了 “间接 访问 ” (的 能 
H) ， 这 意味 着 可 以 与 人 类 的 辅助 技术 相 融 合 (例如 : 电脑 屏幕 阅读 器 ) o 


可 访问 性 可 以 被 视 为 针对 于 某 些 系统 或 实体 的 “访问 能 力 ”。 该 概念 的 重点 在 于 通过 可 访问 
性 或 使 用 可 访问 性 使 残疾 人 和 有 特殊 需要 的 人 实现 接 入 和 访问 。 然 而 ， 研 究 和 开发 可 访 
问 性 是 受益 每 一 个 人 。 


可 访问 性 不 能 与 可 用 性 混淆 ， 可 用 性 是 指定 用 户 为 实现 特定 的 目标 ， 在 特定 的 使 用 环境 
中 使 用 产品 (服务 或 者 环境 ) 的 程度 。 


可 访问 性 和 通用 化 设计 有 着 非常 密切 的 关系 。 在 这 里 ， 通 用 化 设计 指 的 是 能 够 在 最 大 范 
围 内 和 最 大 程度 上 ， 设 计 普通 人 和 残疾 人 都 能 够 使 用 的 产品 6 的 过 程 。 这 种 设计 应 该 尽 可 
能 多 地 照顾 到 不 同类 型 和 不 同 程度 的 拥有 身体 缺陷 的 用 户 。 这 就 是 在 创造 无 障碍 环境 。 


一 维基 百科 
综合 学 习 : 


e UX 的 基础 : 可 访问 性 [观看 ][ 付 费 ] 

o 屏幕 阅读 器 是 如 何 支 持 HTML 标 签 的 [阅读 ] 

© Web 可 访问 性 简介 -谷歌 公开 在 线 教育 视频 [观看 ] 

。 Web 可 访问 性 简介 - WAI [阅读 ] 

e Web 应 用 程序 的 通用 设计 : 适合 所 有 人 的 Web 应 用 程序 [阅读 ][ 付 费 ] 
e Web 可 访问 性 : XT] [观看 ][ 付 费 ] 

© 为 所 有 人 服务 的 网 络 世 界 [阅读 ][ 付 费 ] 

。 Web 可 访问 性 [观看 ][ 付 费 ] 


标准 /规范 : 


e 可 访问 的 互联 网 应 用 程序 (WAI-ARIA) 现状 
e 网 络 无 障碍 倡议 (WAI) 
e 网 页 内 容 辅 助 功 能 指南 (WCAG) 当前 状态 
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Content Security 
Offline Web Policy 


Canvas 








Full Screen API 


Gradients 


css3 
Transitions 







CSBS Filters 


Web Audio 
API 
WebGD pom Mutation 
observers 


requestAnimationFrame 


CSS3 Flexbox 


E] A A? http://www.evolutionoftheweb.com/ 


BOM (浏览 器 对 象 模 型 ) 和 DOM (RUM SUBE) 并 不 是 唯一 的 通过 浏览 器 的 web 平台 可 
以 利用 的 浏览 器 API。 不 单单 指 DOM 或 BOM， 只 要 是 在 浏览 器 上 编程 的 API 都 可 以 认为 是 
一 个 web 或 浏览 器 API (可 惜 的 是 这 些 APL 曾经 被 叫做 HTML5 API, 这 将 它们 自己 的 特性 一 标 
准 与 实 明确 HTML5 标记 语言 的 HTML5 标准 相 混淆 )。 注 意 ，web 或 浏览 器 API 确实 包 
括 能 通过 平板 或 手机 设备 上 的 浏览 器 利用 的 设备 API (例如 ， Navigator.getBattery() ) ° 


你 应 该 了 解 并 学 习 那 些 通用 的 APl。 让 自己 熟悉 这 些 AP|I 的 好 方法 之 一 就 是 去 研究 
HTML5test.com 上 的 占有 率 前 五 的 浏览 器 API 。 


g: 


4k 


e Pro HTML5 Programming [阅读 ] 


23 


a 


T: 


w 
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学 习 web/ Xi W & API 
用 Web Audio 为 你 的 站 点 添加 声音 [观看 ] 
Web Audio 的 乐趣 [观看 ] 

Web Audio API [阅读 ] 


学 习 Canvas: 


e HTML5 Canvas [阅读 ] 


注意 : 
MDN 上 有 很 多 关于 web/ 浏 览 器 的 API 。 


e MDN Web API 参考 
e MDN Web APIs API 参考 -所 有 API， 按 字母 排序 


e MDN WebAPI - 对 应 用 有 用 的 设备 API 列表 


记 住 不 是 所 有 的 API 都 在 W3C 或 WHATWG 中 声明 过 。 


除了 MDN ， 下 面 的 资料 对 于 了 解 所 有 的 API 也 是 有 用 的 : 


e HTML 5 JavaScript API 索引 
e HTML5 & Y. 
e platform.html5.org 


66 


学 习 JSON (JavaScript 对 象 表示 法 ) 


学 习 JSON (JavaScript 对 象 表示 法 ) 


JSON, (更 加 标准 的 说 法 应 该 是 Javascript 对 象 表示 法 )， 有 是 一 个 使 用 接近 自然 语言 的 文 
字 来 传输 包含 键 值 对 的 数据 对 象 的 开放 标准 格式 。 它 是 浏览 器 一 服务 器 进行 — 
(AJAX) 的 时 候 使 用 的 主流 数据 格式 ， 在 AJAX 中 基本 已 经 替代 了 之 前 的 X 


JSON 是 独立 于 语言 的 数据 格式 ， 尽 管 它 最 初 起 源 于 Javascript 脚本 语言 。 许 多 程序 语 
言 都 自 带 解析 和 生成 JSON 数据 的 代码 o 


Douglas Crockford 定义 了 最 初 的 JSON 格式 ， 然 而 现在 它 的 规范 存在 于 RFC 7159 以 
及 ECMA-404 这 两 个 存在 竞争 关系 的 标准 当中 。 其 中 ，ECMA 标准 更 为 轻 量 ， 它 仅仅 描 
述 了 允许 使 用 的 语法 规则 ; 而 REC 的 规范 则 在 语义 和 安全 性 上 进行 了 进一步 的 考虑 。 
JSON 官方 的 因特网 媒体 类 型 是 application/json， 文 件 扩 展 名 是 json ° 


一 维基 百科 
概论 : 


e Javascript 对 象 表示 法 介绍 : 中 肯 实 用 的 ISON 指南 [阅读 ][ 增 值 付费 ] 
e json.com [阅读 ] 
e TÄ JSON [观看 ] 


参考 文档 : 
e json.org [阅读 ] 
标准 一 规范 : 


。 ECMA-404 JSON 数据 交换 格式 
e RFC 7159 Javascript 对 象 表 示 法 (JSON) 数据 交换 格式 


架构 : 


e JSON API 
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学 习 JS 模板 


典型 的 JavaScript 模板 一 般 在 MV* 设计 模式 中 ， 用 于 把 View Æ (PP UI). 从 逻辑 和 数据 层 
(比如 ， 数 据 或 JSON) 中 分 离 出 来 。 


e ES6 模板 语法 , Handlebars 杀手 ? [阅读 ] 
e nunjucks 入 门 [阅读 ] 

e Handlebars 速成 [阅读 ][ 付 费 ] 

e Handlebars 模板 [视频 ][ 付 费 ] 

e 10 分 钟 掌握 Handlebars [阅读 ] 

。 Lodash 模板 [文档 ] 


WER: 


JavaScript 2015 (PP ES6) 有 一 个 原生 的 模板 机 制 叫做 "模板 字符 串 "。 另 外 ， 最 近 跟 模板 有 关 
的 热 词 还 有 JSX、" 模 板 元 素 " 和 HTML strings ° 


建议 : 


如 果 您 对 模板 还 不 熟悉 ， 首 先 搞 定 JavaScript 的 "模板 字符 串 "。 如 果 项 目 与 React 相关 ， 您 
可 以 使 用 JSX。 再 往 后 您 可 以 学 习 nunjucks ° 


学 习 静 态 网 页 生成 器 


静态 网 站 生成 器 通常 用 服务 端 代码 来 编写 (例如 ，ruby，PHP > python > nodeJS > 6) > A 
静态 文本 数据 + 模版 ， 生 成 从 服务 器 发 送 到 客户 端的 静态 HTML 文件 。 
概论 : 


e 静态 网 站 生成 器 [文章 ] 


通过 JS 学 习 计 算 机 科学 


。 六 小 时 助 你 攻克 四 个 学 期 的 计算 机 课程 [视频 ][ 付 费 ] 

e Javascript 中 的 计算 机 科学 [文章 ] 

e 使 用 Javascript 编写 的 经 典 计 算 机 科学 中 的 范例 ， 算 法 以 及 方法 [文章 ] 
e Javascript 中 的 算法 和 数据 结构 [视频 ][ 付 费 ] 


学 习 前 端 应 用 架构 
综合 学 习 : 1 


e JavaScript 应 用 设计 [阅读 ][ 增 值 付费 ] 
e 编写 JavaScript 应 用 代码 [阅读 ] 


过 时 的 学 习 材 料 : 


e 用 React 和 Ampersand 构建 应 用 [观看 ][ 增 值 付费 ] 
e 构建 现代 的 单 页 网 络 应 用 [观看 ][ 增 值 付 费 ] 

e i175] JavaScript: 模块 化 [阅读 ] 

静态 应 用 工作 指南 [阅读 ] 

网 络 应 用 工作 指南 [阅读 ] 

e 前 端 参 考 问 卷 [阅读 ] 

对 人 类 友好 的 JavaScript [阅读 ] 

Nicholas Zakas: 可 扩展 的 JavaScript 应 用 的 构建 方法 [观看 ] 
e JavaScript 功能 组 织 [观看 ][ 增 值 付费 ] 

e 构建 大 型 Javascript 应 用 [阅读 ] 

绝无仅有 地 出 色 [阅读 ] 

e Ul 架构 [观看 ][ 增 值 付费 ] 

网 络 Ul 架构 [观看 ][ 增 值 付费 ] 


注释 : 


这 个 主题 下 面 并 没有 太 多 新 近 产 出 的 内 容 。 大 部 分 可 供 学 习 如 何 构建 前 端 二 单 页 Javascript 
应 用 的 内 容 都 建立 在 某 个 具体 工具 之 上 ， 例 如 Angular > Ember > React X Aurelia ° 


建议 : 


1 2017 年 ， 请 学 习 Webpack, React, 以 及 Redux， 并 且 请 从 "A Complete Intro to React" 和 
"Building Fie with React and Redux in ES6" 开 始 。 


问卷 调查 结果 


下 图 来 自 2016 前 端 工具 调查 (4715 名 开发 者 参与 ) 以 及 2016 JS 现状 调查 (9307 名 开发 者 参 
与 ) 
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5f 2] RAE (例如 ，JSON) API 的 设计 


Node.js 中 的 API 设计 (使 用 Express & Mongo) [视频 ][ 付 费 ] 
构建 不 恶心 人 的 APIs [文章 ][ 付 费 ] 

JSON API [文章 ] 

Node.js 中 的 RESTful Web API 设计 - 第 二 版 [文章 ][ 付 费 ] 


2] React & Redux 


= >] React & Redux 


React: 


e React.js Introduction For People Who Know Just Enough jQuery To Get By [阅读 ] 
e React.js Fundamentals [视频 ] 
e 13 things you need to know about React [阅读 ] 
e Tutorial: Intro To React [阅读 ] 
e React Enlightenment [阅读 ] 
e ReactJS For Stupid People [阅读 ] 
e REACT FOR BEGINNERS [视频 ] 
e Complete Introduction to React (feat. Redux and React Router) [视频 ] 
e React In-depth: An exploration of UI development [阅读 ] 
e Complete Intro to React v2 (feat. Router v4 and Redux) [视频 ][$] 
o Welcome to A Complete Intro to React [阅读 ] 
Build Your First Production Quality React App [视频 ][ 付 费 ] 


Redux: 


e You Might Not Need Redux 
e ADummy's Guide to Redux and Thunk in React [阅读 ] 
e Redux Tutorials [视频 ] 
e Getting Started with Redux [视频 ] 
o https://github.com/dwyl/learn- 
redux/blob/master/egghead.io video tutorial notes.md 
e Learn Redux [视频 ] 
e 10 Tips for Better Redux Architecture [视频 ] 
e Building React Applications with Idiomatic Redux [2,35 ] AT ¥ ] 


注意 : 
一 旦 学 会 了 React 你 可 能 会 考虑 了 解 一 下 Preact 和 Inferno 。 


当 你 掌握 了 Redux 看 一 看 MobX 或 者 从 零 开 始 自己 实现 一 套 类 Redux 的 方法 。 


学 习 渐 进 式 Web 应 用 


学 习 渐 进 X, Web 应 用 


不 同 于 传统 应 用 ， 渐 进 式 web 应 用 是 普通 网 页 (或 网 站 ) 与 移动 应 用 的 混合 体 。 这 种 新 
的 应 用 模型 尝试 将 移动 端的 体验 优 y 器 提供 的 大 部 分 特性 相 结合 。 


tea ' 设计 师 Frances Berriman 和 Google Chrome 工程 师 Alex Russell ena 
it X, Web 应 用 "这 个 术语 ， 这 个 词 用 来 形容 那些 充分 利用 现代 浏览 器 新 特性 的 应 用 ， 

些 特性 包括 Service Workers 和 Web App Manifests， 它 们 使 得 web 应 用 一 路 成 为 三 P 

原生 系统 中 应 用 的 头等 公民 。 


按照 Google Developers 网 站 的 说 法 ， (渐进 式 Web 应 用 ) 包含 以 下 特征 : 


e 渐进 式 - (应 用 ) 对 每 个 用 户 都 可 用 ， (开发 者 ) 不 必 关 心 用 户 选择 何 种 浏览 器 。 
因为 应 用 是 以 渐进 增强 作为 核心 原则 构建 的 。 

e 响应 式 - 适应 于 任何 形式 的 设备 : 桌面 、 移 动 、 平 板 或 者 还 未 出 现 的 设备 形式 。 

e 独立 的 连接 - Service workers 允许 应 用 离线 工作 ， 或 者 在 低 质 量 的 网 络 环境 下 工 
作 。 

e 类 应 用 - 用 户 感 觉 像 是 原生 应 用 ， 因 为 它们 拥有 着 原生 风格 的 交互 和 导航 。 

e 保持 最 新 - 得 益 于 service worker 的 更 新 进程 ， 应 用 总 是 能 够 及 时 更 新 。 

e 安全 -服务 构建 于 HTTPS 上 ， 从 而 能 够 防止 被 嗅 探 ， 并 确保 内 容 不 被 鼻 改 。 

e 可 被 发 现 的 - 能 够 被 识别 为 “应 用 ” 且 允 许 被 (本 地 应 用 ) 搜索 引擎 找到 ， 这 要 多 亏 了 
W3C 的 manifests[6] 和 service worker 的 注册 作用 域 。 

e 可 再 次 唤起 - 经 由 一 些 特 性 (比如 推送 通知 ) ， 让 再 次 唤起 变 得 更 简单 。 

e 可 安装 - P 导 最 有 用 的 应 用 "保留 "在 屏 
幕 首 页 

e 可 链接 - URL 3t f 


一 维基 百科 


e 渐进 式 Web 应 用 [阅读 ] 

e 新 手 的 渐进 式 Web 应 用 指南 [阅读 ] 

e 渐进 式 Web 应 用 [阅读 ] 

。 从 渐进 式 Web 应 用 起 步 [MATS] 

e 构建 一 个 渐进 式 Web 应 用 [观看 ][$] 

e Google 渐进 式 Web 应 用 介绍 [观看 ] 

。 原生 应 用 要 完蛋 了 [观看 ] 

e 为 什么 原生 应 用 昌 的 要 完了 : 原生 应 用 要 完 第 2 部 分 [阅读 ] 
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= 2] tt JS API 


e 设计 更 好 的 Javascript APIs [文章 ] 
e 编写 Javascript APIs [文章 ] 


2 2] web7T ALA 


学 习 Web 开 发 工具 


Web 开 发 工具 可 以 让 Web 开 发 者 们 对 自己 的 代码 进行 测试 和 调试 。 这 些 工具 并 不 支持 直 
观 的 创建 Web 页 面 ， 也 使 得 它们 与 站 点 集成 工具 和 |DEs 工 具 不 一 样 , 更 确切 的 说 ， 它 们 是 
用 来 调试 开发 者 所 面 对 的 Web 网 站 或 Web 应 用 接口 的 工具 。 


Web 开 发 工具 一 般 是 浏览 器 的 附加 软件 或 内 置 在 web 浏 览 器 中 。 时 下 最 受 欢 迎 的 浏览 器 
如 : 谷歌 浏览 器 , 火狐 浏览 器 , 欧 朋 浏览 器 , IE 浏览 器 , 以 及 苹果 浏览 器 ， 它 们 都 为 web 开 
发 者 内 置 ere ， 在 各 自 的 插件 下 载 中 心 还 有 很 多 其 他 的 插件 可 以 找到 。 


Web 开 发 工具 使 得 web 开 发 者 可 以 在 工作 中 应 用 多 样 化 的 技术 ， 包 括 html、css、Dom、 
JavaScript 以 及 Web 浏 览 器 提供 的 其 它 组 件 。 由 于 web 浏览 器 越 来 越 流 行 ，web 浏 览 器 已 
经 为 开发 人 员 包 含 了 更 多 的 功能 。 


— Wikipedia 
虽然 大 多 数 浏览 器 已 经 装备 了 web 开 发 工具 ， 但 谷歌 开发 工具 是 目前 最 受 关注 和 广泛 使 用 的 工 


具 。 


建议 您 学 习 和 使 用 谷歌 网 页 开发 工具 ， 只 因为 学 习 网 页 开发 人 员工 具 的 最 住 资 源 民 围绕 着 合 
歌 开发 工具 。 


学 习 谷 歌 web 开 发 工具 : 


e 谷歌 开发 者 工具 [阅读 ][ 付 费 ] 

e 探索 学 习 谷 歌 开 发 工具 

。 掌握 谷歌 开发 工具 [阅读 ][ 付 费 ] 

e 使 用 Chrome 开 发 者 工具 [阅读 ][ 付 费 ] 


谷歌 web 开 发 工具 相应 文档 : 


e 命令 行 API 参 考 
键盘 和 UI 快 捷 键 参考 
e 各 开发 工具 文档 
自 定 义 开 发 工具 


新 闻 / 时 讯 /播客 /小 贴 士 : 


e 开发 小 贴 士 
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学 习 命 令 行 的 使 用 


一 个 命令 行 界面 或 者 命令 语言 解释 程序 (CLI) ， 也 被 称 为 命令 行 用 户 界面 ， 控 制 台 用 户 
tes 以 及 学 和 FAP RG (CUI) 。 用 户 通过 在 命令 行 界面 中 连续 地 键入 文字 (命令 行 ) 


一 维基 百科 


基础 : 


Bash 指 南 [文章 ] 

Codecademy: 学 习 使 用 命令 行 [视频 ] 
命令 行 高 级 用 户 [视频 ] 

成 为 危险 的 命令 行使 用 者 [文章 ] [免费 增值 ] 
遇见 命令 行 [文章 ][ 付 费 ] 


e 高 级 命令 行 技术 [视频 ][ 付 费 ] 


学 习 Node.js 


学 习 Node.js 


Node.js 是 一 个 可 用 于 开发 服务 器 端 Web 应 用 的 开源 跨 平台 运行 时 环境 。Node.js 应 用 
是 由 JavaScript 语言 实现 的 ， 可 以 运行 在 OS X ^ Windows ` Linux ` FreeBSD ` 
NonStop ` IBM AIX ` IBM z 和 IBM i 系统 的 Node.js 环境 中 。 Node.js 由 Linux 基金 会 
的 合作 伙伴 Node.js 基金 会 所 有 并 提供 支持 。 


Node.js 采用 基于 事件 驱动 的 架构 和 非 阻塞 的 VO API 设计 ， 以 优化 即时 Web 应 用 的 知 
吐 量 和 可 扩展 性 。Node.js 使 用 Google 的 V8 Javascript 引擎 执行 代码 ， 并 且 绝 大 部 分 
的 基础 模块 是 用 Javascript 54 ° Node.js 包含 了 一 个 内 建 的 库 ， 即 使 没有 传统 的 服务 
器 软件 如 : Apache , Nginx 或 者 IS 您 也 可 以 很 方便 地 使 用 Node.js 创建 一 个 Web 服务 


o 
E 


一 维基 百科 


综合 学 习 : 


e Node 编程 艺术 [阅读 ] 
Node.js 入 门 [视频 ][ 付 费 ] 

Evented Mind 带 你 Node.js ATI [视频 ][ 付 费 ] 

。 io.js 和 Node.js 入 门 [视频 ][ 付 费 ] 

e 学 习 Node 服务 器 端 编程 [阅读 ][ 付 费 ] 

e 带 你 学 习 Node.js [自行 研讨 ] 

e Node.js 基础 [视频 ][ 付 费 ] 

e Node.js 实战 [阅读 ][ 付 费 ] 

e 使 用 Node.js 开发 实时 Web 应 用 [视频 ] 

。 使 用 Node.js FÈ EZ Web 服务 从 零 到 上 线 [视频 ][ 付 费 ] 


81 


关于 模块 的 学 习 


概论 : 


e jsmodules.io 
e 深入 理解 ES6 1222 [read] 
e 探索 JS — 12 [read] 


参考 文献 : 


e MDN - export 
e MDN - import 


注释 : 


关于 浏览 器 加 载 模块 的 部 分 ， 我 们 仍 在 寻求 支持 ， 在 那 之 前 请 参考 "ES Module Loader 
Polyfill" 以 及 "JavaScript Loader Standard" ° 


关于 模块 加 载 和 打包 工具 


Webpack: 


e Webpack 

e 深入 Webpack [x €] 

e Webpack 基础 知识 [视频 ][ 付 费 ] 

e Survivejs.com Webpack Book [文章 ] 


Rollup: 


e Rollup 


SystemJS: 


e 用 SystemJS 和 jspm 编写 现代 的 ， 模 块 化 的 JavaScript 代码 [视频 ][ 付 费 ] 


注释 : 


开发 者 使 用 类 似 于 Gulp 之 类 的 JS 模块 化 打包 工具 来 帮助 开发 并 不 鲜 见 。 然 而 ， 许 多 的 Gulp 
插件 本 质 上 仅仅 是 利用 了 Webpack, Rollup, 或 者 SystemJS 而 已 。 


学 习 包 管理 工具 


关于 包 管 理工 具 的 学 习 


包 管 理工 具 或 者 包 管 理 系统 ， 是 一 些 以 一 致 的 风格 对 计算 机 操作 系统 中 的 软件 包 进 行 自 
动 化 安装 、 升 级 、 配 置 以 及 删除 的 软件 工具 。 它 通常 维护 着 一 个 关于 软件 依赖 性 和 版 本 
信息 的 数据 库 ， 用 以 解决 软件 之 间 的 配对 和 依赖 问题 。 


一 维基 百科 


e Javascript 包 管 理工 具 的 工作 原理 入 门 

e npm 和 Bower 中 神奇 的 SemVer Ranges [阅读 ] 
e 包 管 理工 具 : 给 前 端 开发 新 手 的 介绍 性 指南 [阅读 ] 
e nom 文档 

e yarn 文档 
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学 习 版 本 控制 


学 习 版 本 管理 


版 本 管理 做 为 软件 配置 管理 的 要 素 ， 也 被 称 为 修 定 管理 或 者 源 代码 管理 。 它 用 于 管理 文 
档 ， 程 序 ， 大 型 网 站 ， 以 及 其 它 信息 集合 的 变更 。 变 更 使 用 一 串 数 字 或 者 字母 来 加 以 标 
识 ， 这 个 标识 被 称 做 『 修 订 号 」『 修 订 标 识 」 RAR MGT] 。 比 如 说 ， 一 些 文件 的 初 
始 状态 是 『 修 订 14 当 第 一 个 改变 发 生 后 ， 这 些 文件 变 成 了 『 修 订 24 如 此 继续 。 每 一 次 
修订 都 和 一 个 时 间 邮 惟 及 修订 的 人 有 关 。 所 有 的 『 修 订 J 都 可 以 被 比较 ， 复 原 ， 以 及 针 
对 特定 类 型 的 文件 ( 译 者 注 : 此 处 指 文本 文件 ) 进行 合并 。 


一 维基 百科 


e codeschool.com [交流 ] 
e 正确 使 用 Git [阅读 ] 

e Git 基础 [观看 ][ 收 费 ] 
e 全 面 学 习 Git [阅读 ] 

e Ry 的 Git AT] [阅读 ] 


高 级 内 容 : 


e 高 级 Git 教程 [阅读 ] 
。 专业 Git [阅读 ] 
。 学 习 Git 分 支 [交流 ] 


参考 文档 : 


e https://git-scm.com/doc 
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学 习 构 建 及 任务 自动 化 技术 


构建 自动 化 是 对 软件 构建 及 相关 流程 自动 化 的 过 程 。 这 些 相关 流程 包括 : 将 计算 机 源码 
编译 成 二 进 制 代码 ， 打 包 二 进 制 代码 以 及 运行 自动 化 测试 。 


一 维基 百科 
常规 学 习 : 


e Gulp 入 门 [阅读 ][ 收 费 ] 
e Gulp 基础 [观看 ][ 收 费 ] 
e 使 用 Gulp.js 自动 化 构建 JavaScript [观看 ][ 收 费 ] 


参考 和 文档 : 


e Gulp 


建议 : 


虽然 Gulp 很 棒 ， 但 你 可 能 只 需要 npm run 命令 。 在 把 额外 复杂 度 添加 到 你 的 应 用 程序 技术 
栈 之 前 ， 先 问 问 自己 : 仅 靠 nm run 能 否 完成 任务 ? 如 果 答案 为 否 ， 那 就 使 用 Gulp。 


阅读 : 


e Grunt 滚 蛋 ! 使 用 npm 来 当 构 建 工 具 的 指南 

e 如 何 使 用 nom 来 当 构建 工具 

e 使 用 npm run 自动 化 任务 

e 在 你 的 下 一 个 项 目 里 用 nom 当 构 建 系 统 

e 用 npm 作为 任务 运行 启动 器 [观看 ][ 收 费 ] 

e AWARE FH Gulp 和 Grunt 转 而 使 用 npm WA? 
e 为 什么 使 用 npm 脚本 ? 


Co 


O) 


学 习 网 站 性 能 优化 


学 习 网 站 性 能 优化 


页 面 性 能 优化 ， 又 称 WPO ， 亦 或 是 站 点 优化 ， 它 是 一 门 提升 页 面 在 用 户 Web xl 


下 载 及 展现 速度 的 学 问 g 随 着 全 球 平均 网 速 的 不 断 提 升 , 对 于 网 站 管理 员 及 站 长 1 来 


说 ， 关 注 用 户 所 访问 网 站 的 泻 染 时 间 是 很 有 必要 的 。 


一 维基 百科 


通用 知识 学 习 : 


浏览 器 泻 染 优化 [观看 ] 

更 快 的 网 站 : 针对 Web 开发 者 的 最 佳 性 能 实践 [阅读 ][$] 
高 性 能 Web 站 点 : 前 端 工程 师 必 知 必 会 [阅读 ][$] 
JavaScript 的 性 能 基石 [阅读 ] 

PageSpeed Insights 规则 [阅读 ] 
perf-tooling.today [阅读 ] 

性 能 日 历 [阅读 ] 

perf.rocks [阅读 ] 

使 用 WebPageTest [阅读 ][$] 

Web 性 能 日 记 卷 2 [阅读 ][$] 

Web 性 能 : 权威 指南 [阅读 ] 

网 站 性 能 [观看 ][$] 

网 站 性 能 优化 [观看 ] 


We 
p^ 
] 


ya 
ae 


中 
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学 习 测 试 


学 习 测 试 


单元 测试 - 编写 程序 时 ， 单 元 测试 是 一 种 测试 方法 。 它 使 用 特定 的 数据 ， 特 定 的 手段 ， 
特定 的 操作 ， 以 检验 独立 的 一 段 代码 ， 一 个 或 多 个 模块 是 否 能 正常 工作 。 你 可 以 将 『 单 
元 」 看 做 是 应 用 程序 最 小 可 测试 的 单位 。 


一 维基 百科 


功能 测试 - 功能 测试 是 一 种 质量 保证 (QA) 的 过 程 。 同 时 它 也 是 一 种 黑 盒 测试 ， 它 的 测 
试用 例 基 于 组 件 的 设计 。 功 能 测试 即 给 定 输入 检查 输出 ， 它 很 少 考虑 程序 的 内 部 结构 
(不 像 白 盒 测 试 ) 。 功 能 测试 通常 描述 的 是 系统 做 什么 。 


一 维基 百科 


集成 测试 - 集成 测试 (有 时 被 称 为 集合 和 测试 ， 简 称 RT ) 是 软件 测试 的 一 种 过 程 。 在 
这 个 过 程 中 软件 的 独立 模块 被 整合 后 做 为 一 个 组 一 起 测试 。 它 发 生 在 单元 测试 后 ， 确 认 
测试 前 。 集 成 测试 把 经 过 单元 测试 的 模块 聚合 成 一 个 整体 进行 测试 ， 并 做 为 系统 测试 中 
系统 集成 是 否 成 功 的 结果 。 


一 维基 百科 
综合 学 习 : 


e 前 端 优先 : 测试 并 原型 化 JavaScript 应 用 [视频 ][ 付 费 ] 

e 编写 测试 驱动 的 JavaScript [视频 ][ 付 费 ] 

e JavaScript 测试 [视频 ] 

e JavaScript 测试 妙 方 [阅读 ][ 付 费 ] 

e 可 测试 的 JavaScript [阅读 ][ 付 费 ] 

e 测试 驱动 的 JavaScript 应 用 : 开发 快速 , 自信 , 可 维护 的 代码 [阅读 ][ 付 费 ] 
e 测试 驱动 的 JavaScript 开发 [阅读 ][ 付 费 ] 

e Web 测试 之 路 : 新 手 自动 测试 指南 [阅读 ][ 付 费 ] 
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无 头 浏览 器 是 没有 用 户 图 形 界面 的 浏览 器 。 


We SR se 


KKB BRET OT HA Bases n 这 种 控制 所 依赖 的 环境 和 现代 web 浏览 器 类 
似 ， 然 而 却 是 通过 命令 行 界面 或 者 网 络 通讯 实施 。 它 们 是 良好 的 网 页 测试 工具 ， 提 供 了 
和 普通 web 浏览 器 同样 的 功能 ， 包 括 泻 染 HTML、 页 面 布局 、 颜 色 以 及 字体 ， 同 时 也 提 
供 了 JavaScript 和 AJAX 的 加 载 和 执行 ， 这 是 其 它 测试 工具 通常 做 不 到 的 。Google 在 
2009 年 的 时 候 声 称 ， 使 用 无 头 浏览 器 可 以 帮助 他 们 的 搜索 引擎 在 网 站 中 定位 那些 使 用 
AJAX 技术 加 载 的 内 容 。 


一 维基 百科 


e 使 用 PhantomJS 和 CasperJS 使 网 络 自 动 化 [视频 ][ 增 值 付费 ] 
e PhantomJS A11 [文章 ][ 增 值 付 费 ] 

PhantomJS 教材 [文章 ][ 增 值 付费 ] 

PhantomJS 网 络 自动 化 [视频 ] 

快捷 的 PhantomJS [视频 ][ 增 值 付费 ] 
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学 习 离 线 开发 


所 谓 的 离线 开发 (又 称 离线 优先 ) 是 围绕 某 些 设备 在 开发 实践 所 中 涉及 的 知识 和 讨论 ， 这 些 
设备 并 非 总 是 处 于 连接 到 互联 网 或 者 电源 。 


概论 : 


e 创造 HTML5 离线 网 络 应 用 [文章 ] 

。 关于 创造 离线 网 络 应 用 ， 你 应 该 知道 的 事情 [文章 ] 
e 离线 优先 [文章 ] 

e offlinefirst.org [文章 ] 

e 你 的 首 个 离线 Web 应 用 [文章 ] 


ms WM 244 
e 4 P 给 


网 络 一 浏览 颈 二 应 用 的 安全 性 的 学 习 


览 器 安全 性 手册 [文章 ] 
前 端 安全 性 能 [视频 ] 
Hacksplaining [文章 ] 
HTML5 安全 性 参考 手册 [文章 ] 
HTTP 安全 性 最 佳 实践 [文章 ] 
pom 份 和 数据 安全 性 : 最 佳 实践 文章 
给 网 络 开发 者 的 安全 性 建议 : 采用 JavaScript, HTML, 和 CSS [文章 ][ 付 费 ] 
网 络 应 用 安全 性 基础 [文章 ] 
因特网 : defe 2-48 [视频 ] 
因特网 : 解密 和 犯罪 [视频 ] 
错综复杂 的 网 络 世界 : 现代 网 络 应 用 安全 性 指导 手册 [文章 ][ 付 费 ] 
网 络 安全 性 基础 [文章 ] 
网 络 安全 性 [文章 ] 


多 平台 开发 学 习 


多 平台 开发 学 习 


THIS IS THE WEB. 





THIS IS NOT 
THE WEB. 


图 片 来 源 : http://oradfrost.com/blog/post/this-is-the-web/ 

网 站 与 网 络 应 用 总 是 能 够 在 种 类 繁多 的 个 人 电脑 ， 手 提 电 脑 ， 平 板 电脑 和 手机 中 运行 。 除 此 
以 外 ， 许 多 的 新 型 设备 如 手表 ， 恒 温 器 ， 冰 箱 等 也 开始 支持 同样 的 功能 。 决 定 支持 怎样 的 设 
备 ， 以 及 怎样 进行 开发 来 支持 这 些 设备 的 过 程 ， 我 们 称 之 为 “多 设备 开发 策略 ”。 下 面 列 出 的 是 
最 常见 的 多 设备 开发 策略 。 
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© 为 所 有 的 设备 搭建 一 个 响应 式 (RWD ) 网 站 应 用 。 

e 为 所 有 的 设备 搭建 一 个 自 适应 渐进 增强 的 网 站 /应 用 。 

© 为 每 个 不 同 设备 或 设备 群体 搭建 网 站 ， 网 络 应 用 ， 或 者 混合 模式 的 移动 应 用 。 
e 采用 以 上 1，2，3 点 中 的 某 些 方式 ， 重 构 已 存在 的 项 目 。 


e 一 分 为 二 (E) - 响应 式 网 站 设计 [文章 ][$] 

e 一 分 为 二 (T) -适用 于 所 有 设备 的 设计 方案 [LEIS] 
e 自 适应 网 站 设计 [文章 ][$] 

e 符合 渐进 增强 原则 的 设计 [文章 ][$] 

e 移动 端 网 站 开发 [视频 ] 

e "AE X HTML 邮件 设计 [视频 ][$] 

e 响应 式 图 片 [视频 ] 

e 响应 式 字体 [视频 ][$] 

e 响应 式 网 站 设计 [视频 ][9] 

e 响应 式 网 站 设计 基础 [视频 ] 


响应 式 内 部 通讯 ， 新 闻 或 者 播客 网 站 : 


e 响应 式 播客 网 站 设计 
e 响应 式 内 部 通讯 网 站 设计 


o 


培训 学 习 


下 面 的 表格 列举 了 一 些 通过 付费 来 指导 你 学 习 的 前 端 课程 ， 项 目 、 学 校 和 训练 营 。 


如 果 觉 得 付费 指导 学 习 比 较 咒 贵 ， 你 也 可 以 使 用 屏幕 录像 ， 书 籍 ， 文 章 等 途径 来 进行 自我 驱 


动 型 的 前 端 开 发 学 习 。 


机 构 


Betamore 


BLOC 


DecodeMTL 


The Flatiron 
School 


General Assembly 


HackerYou 


Iron Yard 
The New York 
Code + Design 
Academy 


Thinkful 


Turing School of 
Software & Design 


Udacity 


课程 
Web 前 端 开 发 
成 为 一 名 前 端 开发 


者 

学 习 Web 前 端 开 
发 

Web 前 端 开 发 入 门 
Web 前 端 开发 


沉浸 式 Web 前 端 


开发 


Front End 
Engineering 


前 端 101 
Web 前 端 开发 
Front-End Web 


Developer 
Nanodegree 


价格 


是 否 
现场 教学 支持 
远程 
巴尔 的 摩 ( 译 者 注 : 
美国 马里 兰州 最 大 的 
城市 ) 
是 
蒙特 利 尔 (GEA UE: 
加 拿 大 东南 部 港 市 ) 
纽约 (美国 ) 
多 个 地 点 
多 伦 多 (加拿大 ) 
多 个 地 点 
纽约 (美国 ) 
是 
是 
多 个 地 点 是 


前 端 开 发 学 习 的 起 点 


那 种 需要 跟随 单一 个 体 去 学 习 前 端 技 术 的 想法 未 渐变 得 毫 无 意义 。 前 端 技术 先进 实践 者 们 正 
在 使 一 种 新 的 学 习 方式 成 为 可 能 : 他 们 在 前 端 社区 里 创造 出 了 足够 多 的 内 容 ， 使 您 能 通过 关 
注 前 端 "< 新闻" 媒体 (通过 新 闻 通 讯 , 新 闻 , & 播客 ) 轻 松 追 随 社区 /领导 者 ， 从 而 进行 学 习 。 


Al) zi 


All 35 UE TA ^ at PA ob fe 42 


前 端 资讯 、 新 闻 站 和 播客 


通用 前 端 资 讯 、 新 闻 和 播客 : 


e 超级 Web Ẹ 

e 开发 小 帖 士 

e 前 端 开发 周报 
e 前 端 欢乐 时 光 
e 5 分钟 前端 新 闻 


e 前 端 前 沿 





e 前 端 关 注 
e 前 端 资讯 
e 前 端 博客 


e 移动 Web 周报 

© 不 换行 空格 秀 

e 开源 Web 平台 每 日 文摘 
e ER 

。 UX 设计 资讯 

e 755 - SitePoint 

e Web ari 

e Web 开发 阅读 清单 

e Web 平台 播客 

e Web 工具 周报 


HTML/CSS 资讯 : 


e 可 访问 性 周报 
e CSS 周报 
e 响应 式 设计 周报 


JavaScript 资讯 、 新 闻 和 播客 : 


e JS 回声 

e ECMAScript 日 报 
e ES.next 新 闻 

e FiveJS 

e JavaScript 播送 
e 闲谈 JavaScript 
e JavaScript Kicks 
e JavaScript # 2 


前 端 资讯 、 新 闻 站 和 播客 


e JavaScript 周报 
e JavaScript.com 
e React 动态 


图 形 和 动画 资讯 、 新 闻 和 播客 : 


e 运动 及 意义 

e 响应 式 图 片 社 区 小 组 资讯 
e SVG 沉浸 式 播客 

e Web 动 效 周报 
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第 三 部 分 简要 地 介绍 和 罗列 了 前 端 圈 内 的 工具 

在 学 习 这 些 工 具 之 前 ， 请 确保 你 理解 了 它们 的 分 类 ， 分 类 内 包含 了 某 一 系列 的 工具 。 

需要 注意 的 是 ， 某 个 工具 ee 
名 前 端 开 发 人 员 应 该 学 习 和 使 用 它 。 请 选择 你 自己 的 工具 箱 。 我 只 是 提供 了 常见 的 选项 。 


THE FRONT-END SPECTRUM 






A 
9 
5 


Package Managers 






Text Editors 





Front-End Performance 


JS Frameworks UI Frameworks 











JS Preprocessors 










Process Automation Templating 


Code Quality Browser Refreshing 






Build Tools CSS Preprocessors 


OOCSS & Style Guides 






Testing 


Back-End Version Control 





图 片 来 源 : https://medium.com/@withinsight1/the-front-end-spectrum-cOf30998c9f0 


Responsible Web Design 


Doc/API 浏览 工具 


浏览 常用 开发 者 文档 和 API 参考 资料 的 工具 。 


e Dash [OS X, iOS][ 付 费 ] 
e DevDocs 

e Velocity [Windows][ 付 费 ] 
e Zeal [Windows, Linux] 


SEO 工具 


e 关键 词 工具 
e Google 站 长 工具 
e Varvy SEO 工具 


寻找 SEO 工具 的 工具 : 


e SEO 工具 一 ”完整 列表 


原型 设计 和 线 框图 工具 


设计 工具 : 


e Axure [付费 ] 

。 Balsamiq Mockups [付费 ] 
e Justinmind [付费 ] 

e UXPin [免费 增值 ] 


协作 /展示 工具 : 


e InVision [免费 增值 ] 
e Conceptboard [免费 增值 ] 
e myBalsamiq [付费 ] 


制图 工具 


e draw.io [免费 增值 ] 
e Cacoo [免费 增值 ] 
。 gliffy [免费 增值 ] 


HTTP / 网 络 工具 


e Charles [付费 ] 

e Chrome 开发 者 工具 网 络 面板 
e Insomnia [免费 增值 ] 

e Paw [付费 ] 

e Postman [免费 增值 ] 


代码 编辑 工具 


源 代 码 编 辑 器 是 为 编辑 计算 机 程序 源 代 码 而 设计 的 文字 编辑 程序 。 它 可 能 是 一 个 单独 的 
应 用 程序 ， 也 可 能 区 入 在 一 个 集成 的 开发 环境 (IDE) 或 者 浏览 器 中 。 因 为 编程 人 员 最 基 
本 的 工作 就 是 编写 源码 ， 因 此 源 代码 编辑 器 是 最 基本 的 编程 工具 


一 维基 百科 


使 用 诸如 Notepad 和 TextEdit 之 类 简单 的 文字 编辑 器 即 可 满足 前 端 代码 编写 的 最 低 要 求 。 然 
而 ， 大 多 数 的 前 端 开 发 者 倾向 于 使 用 为 编辑 程序 语言 而 专门 设计 的 代码 编辑 器 。 


代码 编辑 器 有 各 种 各 样 的 类 型 和 大 小 ， 因 此 完全 可 以 根据 个 人 偏好 来 进行 选择 。 做 出 选择 以 
后 ， 全 面 地 学 习 使 用 方法 ， 然 后 投入 到 HTML > CSS > DOM 和 Javascript 的 学 习 中 去 吧 。 


尽管 如 此 ， 我 还 是 强烈 认为 一 款 合格 的 代码 编辑 器 至 少 应 该 达到 以 下 标准 (在 默认 设置 或 者 
使 用 插件 的 情况 下 ) 


够 找到 关于 如 何 使 用 该 编辑 器 的 条 理 清晰 的 文档 ; 

够 对 HTML * CSS 以 及 Javascript 代码 的 质 量 进行 汇报 (提示 诊断 报错 ) 5 
提供 HTML > CSS 以 及 Javascript 代码 高 亮 ; 

提供 HTML > CSS 以 及 Javascript 代码 补 全 ; 

可 以 利用 插件 进行 自 定 义 构 建 ; 

有 许多 可 以 使 用 的 第 三 方 社 区 插件 ， 可 以 用 来 把 编辑 器 自 定义 为 自己 喜欢 的 样子 ; 
小 而 轻 量 ， 同 代码 不 相 耦 合 。 


A 
H 
n 
H 


GG oC 


NO OF > 


e Atom 


Brackets 

Sublime Text [付费 ] 
WebStorm [付费 ] 
Visual Studio Code 


在 线 代码 编辑 器 : 


e Cloud9 [增值 付费 ] 
e Codeanywhere [增值 付费 ] 


可 运行 ， 可 分 享 的 代码 编辑 器 : 


可 以 用 来 分 享 一 定数 量 ， 且 即刻 可 以 运行 在 web 浏览 器 中 的 代码 。 这 类 工具 并 非 盖 正 的 代码 


e CodePen [增值 付费 ] 
e jsbin.com [增值 付费 ] 
e jsfiddle.net 

e liveweave.com 

e Plunker 


建议 : 


1 强烈 建议 使 用 Visual Studio Code ， 这 款 编 辑 器 非常 优质 并 且 处 于 持续 的 更 新 中 ， 另 ， 作 为 
微软 出 品 的 软件 ， 其 质量 和 更 新 速度 都 能 够 到 有 效 的 保证 。 


浏览 器 上 的 神 兵 利器 


浏览 器 环境 下 js 编码 的 实用 工具 : 


e History.js 

e html2canvas 
e Platform.js 
e URIjs 


判断 某 浏览 器 是 否 支持 某 功 能 的 常见 参考 工 


e 查看 浏览 器 对 image 标签 各 属性 的 支持 情况 
e Browserscope 
e caniuse.com 


e Firefox 平台 状态 -Web 平台 功能 的 实施 和 标准 化 路 线 图 


e HTML5 Please 

e HTML5 测试 

e iwanttouse.com 

e jscc.info 

e 平台 状态 

e whatwebcando.today 


浏 | 览 器 开发 /调试 工具 : 


e 谷歌 开发 工具 (别名 DevTools) 
o 各 开发 工具 文档 
o 命令 行 API 参 考 
o 键盘 和 UI 快捷 键 参考 
o 设置 
e 火狐 开发 工具 
。|E 开发 工具 (别名 F12 工具 ) 
e Safariweb 检查 器 


e Vorlon.js 


e Feature.js 
e Modernizr 


a 


多 样 的 浏览 器 Polyfills/Shims: 
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浏览 器 上 的 神 兵 利器 


e console-polyfill 

e HTMLS Cross Browser Polyfills 
e fetch 

e socket.io 

e SockJS 

e webcomponents.js 

e webshim 


浏览 器 托管 测试 、 托 管 自动 化 : 


e Browserling [免费 收费 ] 
e BrowserStack [收费 ] 
e CrossBrowserTesting.com [收费 ] 


Nightcloud.io 
Sauce Labs [收费 ] 


无 界面 浏览 器 : 


e PhantomJS 
o PhantomCSS 
e slimerjs 
e TrifleJS 
e Zombie .js 


应 用 于 功能 测试 和 monkey 测试 (搞怪 测试 ) . 


e CasperJS 
e Nightmare 
e TestCafe 


浏览 器 上 的 奇 淫 巧 技 : 


e browserhacks.com 
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HTML 工具 


HTML 工具 


HTML 模板 /样板 /入 门 套件 : 


e dCodes 

e 电子 邮件 样板 

e HTML5 样板 

e HTML5 骨架 

e 移动 端 样板 

e Web 入 门 套件 样板 及 多 设备 开发 工具 


HTML 兼容 库 : 
e html5shiv 
转译 语言 (Transpiling) 


e HAML 
e Pug 
e Markdown 


参考 : 


e 元 素 属 性 

e ms 

e HTML Arrows 

e HTML 实体 字符 速 查 

e HTML 编程 接口 浏览 器 支持 速 查 
e htmlreference.io 


检查 /提示 : 


e HTMLHint 
e html-inspector 


优化 : 
e HTML Minifier 
在 线 创作 /生成 /试验 工具 : 


e tablesgenerator.com 


HTML 工具 


代码 书写 公约 : 


e HTML 代码 指南 
e 一 致 且 符 合 规范 的 HTML 书写 原则 


工作 流 : 
e Emmet 


HTML X : 


e HTML 5 Outliner 


3 GitHub 热门 HTML 仓库 : 


https://github.com/trending?l=html&since=monthly 
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CSS 工具 


CSS 工具 集 


桌面 和 移动 端 CSS 框架 : 


e Base 

e Basscss 

e Bulma 

e Bootstrap 3 #4 Bootstrap 4 
e Concise 

e Foundation 

e Material Design Lite (MDL) 
e Metro Ul 

e Picnic 

e Pure.css 

e Semantic UI 

e Skeleton 

e Spectre.css 

e tachyons 


移动 专属 CSS 框架 : 
e Ratchet 


CSS $ à: 


css 重 置 文件 (或 者 是 “Reset CSS") 是 简短 的 ， 经 常 压缩 的 〈 最 小 化 的 ) 一 组 css 规则 


集合 。 这 些 规则 将 所 有 HTML 元 素 的 样式 重 置 为 统一 的 基准 。 
— cssreset.com 
e Eric Meyer 4 “Reset CSS" 2.0 
e Normalize 
转译 工具 : 


e pleeease.io 

e PostCSS 和 cssnext 
e rework 和 myth 

e Sass/SCSS 

e Stylus 


参考 文献 : 
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CSS 工具 


CSS 光标 

css3test.com 

css3clickchart.com 
cssreference.io 

CSS 索引 - & CSS 标准 定义 的 一 个 术语 列表 
css4-selectors.com 

css4 Rocks 

触发 CSS... 布局 游戏 ， 绘 画 和 合成 
CSS 技巧 年 鉴 

cssvalues.com 

MDN CSS 参考 


检查 /提示 : 


CSS Lint 
stylelint 


代码 格式 器 /美化 器 : 


CSScomb 
CSSfmt 


优化 工具 : 


clear-css 
cssnano 
CSSO 


在 线 创建 /生成 /实验 工具 集 : 


制作 你 的 CSS 箭头 
CSS Matic 

享受 CSS 

玩 转 Flexbox 
flexplorer 
patternify.com 
patternizer.com 

终极 CSS 渐变 生成 器 


CSS 架构 设计 : 


Atomic Design [阅读 ] 
BEM 
ITCSS 
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CSS 工具 


e OOCSS [阅读 ] 

e SMACSS [阅读 ][$] 

e 适用 于 CSS 的 可 扩展 的 模块 化 结构 (SMACSS) [视频 ][ 收 费 ] 
SUIT CSS 

* [SCSS 


编程 /架构 设计 规范 : 


CSS 编码 指南 [阅读 ] 
css-architecture [阅读 ] 


cssguidelin.es [阅读 ] 

常用 的 CSS [阅读 ] 

可 维护 的 CSS [阅读 ] 

灵活 开发 的 标准 ， 可 持续 维护 的 HTML and CSS [阅读 ] 
Airbnb CSS / Sass 格式 指南 [阅读 ] 


本 月 GitHub 上 的 热门 项 目 : 


https://github.com/trending?l=css&since=monthly 
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DOM 工具 


DOM 工具 


DOM XE /7iER: 


e Bliss 
e jQuery 
o You Don't Need jQuery 
e Zepto 
e cash 
Umbrella JS 


DOM 工具 库 : 


e Keypress 
e Tether 
e clipboard.js 


DOM 事件 工具 : 


e Keyboard Event Viewer 
DOM 性 能 工具 : 


e Chrome DevTools Timeline 
e DOM Monster 


参考 文献 : 


e 事件 

e DOM 浏览 器 支持 

e DOM 事件 浏览 器 支持 

e HTML 用 户 界面 浏览 器 支持 
e MDN 文档 对 象 模 型 (DOM) 
e MDN 文档 对 象 模型 

e MDN 文档 对 象 模型 

e MDN 事件 参考 资料 

e MSDN 文档 对 象 模型 (DOM) 


DOM Polyfills / Shims: 


e dom-shims 


e 和 鼠标 事件 Polyfill: Web 平台 统一 事件 系统 
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DOM 工具 


虚拟 DOM: 


e jsdom 
e virtual-dom 
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JavaScript 工具 


JS 实用 工具 : 


e accounting.js 
e async 
e axios 
e chance 
e date-fns 
e format.js 
e immutable 
e is.js 
e lodash 
o 4# Lodash ` Underscore 
e Math.js 
e Moment.js 
e Numeral.js 
e string.js 
e underscore.js 
o 4# Lodash ` Underscore 
e voca 
e wait 
e xregexp.com 


转译 / 类 型 检测 (ES to ES) : 


e Babel 
e TypeScript 
e Flow 


代码 解析 引擎 : 
e Tern 
JavaScript 兼容 性 检查 器 : 
e jscc.info/ 
Linting/Hinting & Style Linter : 


e eslint 


JavaScript 工兵 


单元 测试 : 


e AVA 

e Jasmine 
e Mocha 
e Tape 


单元 测试 之 断言 : 


e Chai 
e expect.js 
e should.js 


单元 测试 之 测试 间谍 (Test Spies) 、 存 根 (Stubs) ` (Mocks) 


e sinon.js 
e Kakapo.js 


代码 格式 化 美化 工具 : 


e esformatter 


js-beautify 


jsfmt 
e prettier 


性 能 测试 : 


e benchmark.js 
e jsperf.co 


TRAL ` HAD RRR BZSIA: 


e Coveralls [$] 
e Esprima 
e istanbul 


优化 工具 : 


e UglifyJS 2 
e optimize-js 


代码 混淆 : 


e Javascript Obfuscator [free to $] 
e JScrambler [$] 
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JavaScript 工具 


可 共享 一 运行 的 代码 编辑 器 : 


e es6fiddle.net 
e jsbin.com [free to $] 
e jsfiddle.net 


在 线 正则 表达 式 编辑 器 可 视 工 具 : 


e debuggex 
e regex101 
e regexper 
e RegExr 


著作 约定 工具 : 


e Airbnb's ESLint config, following our styleguide 
e Standard - ESLint Shareable Config 


本 月 GitHub 上 的 热门 JS 仓库 : 


https://github.com/trending?l=javascript&since=monthly 


依赖 度 最 高 的 NPM 包 : 


https://www.npmjs.com/browse/depended 
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静态 网 页 构建 工具 


网 页 构建 工具 列表 : | 


e staticgen.com 
e staticsitegenerators.net 
e Metalsmith 


建议 : 


| 在 使 用 静态 网 页 构建 工具 之 前 ， 请 考虑 使 用 Gulp 来 编排 自 定义 解决 方案 ， 或 者 使 用 一 个 利 
用 Gulp 来 生产 静态 网 页 的 工具 例如 . Gulp Starter 


无 障碍 访问 工具 


o 
指南 
e 无 障碍 访问 指南 清单 


e 互动 Web 内 容 无 障碍 访问 指南 (WCAG) 2.0 
e 18F 无 障碍 访问 指南 


b 点 扫描 工具 


AA 


aXe 浏览 器 扩展 工具 

Chrome 无 障碍 访问 开发 者 工具 
Tenon 无 障碍 访问 工具 
WAVE 无 障碍 访问 工具 


磊 色 对 比 度 检 查 工具 


Colorable 


Colorable Matrix 
Color Safe 
Color Ratio 


视觉 障碍 模拟 工具 


e SEE (Chrome) 
e Spectrum (Chrome) 
e NoCoffee (Chrome) 


VoiceOver (Mac) 

JAWS (Win) 

NVDA (Win) 

Window-Eyes (Win) 
ChromeVox (Chrome extension) 


无 障碍 访问 工具 
e 基础 屏幕 阅读 指令 


可 读 性 检查 工具 


e Expresso App 

e Hemingway App 
e Grammarly 

e Readability Score 
e MS Office 


相关 文章 


e ARIA AT] 

e $13 Web 的 可 访问 性 

e 无 障碍 访问 入 门 

e 实用 ARIA 实例 

e MDN 无 障碍 访问 指南 

e 在 Chrome 开发 者 工具 中 打开 无 障碍 访问 面板 
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pouce 具 CEAI’ Tyco PRU 


前 端 应 用 程序 框架 : [^1] 


e AngularJS (例如 : Angular 1.x.x) + Batarang 
e Angular (例如 : Angular 2.0.0 +) + angular-cli 
e Aurelia + Aurelia CLI 

e Ember + embercli + Ember Inspector 

e Polymer 

e React + create-react-app + React 开 发 工具 

e Vue.js + vue-cli & Vue.js devtools 

e Riot 


原生 混合 移动 WebView 框 架 (例如 : 浏览 器 引擎 驱动 ) 
这 些 解决 方案 一 般 使 用 Cordova、 crosswalk、 或 自 定义 WebView 作 为 使 用 原生 接口 的 桥梁 。 
e ionic 
e onsen.io 
原生 混合 移动 开发 Webview 环 境 /平台 /工具 〈 例 如 : 浏览 器 引擎 驱动 ) : 
些 解决 方案 一 般 使 用 Cordova、crosswalk、 或 自 定 义 WebView 作 为 使 用 原生 接口 的 桥梁 。 


e Adobe PhoneGap [$] 
e AppBuilder [$] 

e cocoon.io [免费 $] 

e ionic hub [免费 $] 

e kony [$] 

e Monaca [$] 

e Taco 


原生 桌面 WebView 应 用 程序 框架 : (例如 : 浏览 器 引擎 驱动 ) : 


e Electron 
e NW.s 


各 种 平台 应 用 程序 框架 : 


些 解决 方案 可 以 让 您 在 多 个 平台 和 设备 上 构建 应 用 程序 。 


e manifoldJS 


原生 移动 应 用 程序 框架 (又 叫做 原生 JavaScript 应 用 程序 ) 
这 些 解 决 方案 在 运行 时 使 用 JS 引擎 解析 JS 并 连接 到 原生 接口 。 没 有 使 用 浏览 器 引擎 和 
WebView » UI 由 本 机 UI| 组 件 构成 。 


e NativeScript 

e React Native 
e tabris.js [免费 $] 
e trigger.io [$] 

e weex 


e todomvc.com 
e Frontend Guidelines Questionnaire 
e Frontend Guidelines 


性 能 : 


e js-framework-benchmark 


注音 。 
ERS + 


2017 年 基于 UI 应 用 程序 构建 组 件 时 需要 注意 inferno、Svelte、 和 NX。 


建议 : 

1 如 果 你 是 前 端 /JavaScript 应 用 程序 开发 的 新 手 ， 建 议 从 Riot 或 Vue.js 开 始 着 手 。 其 次 学 

习 React。 然 后 Angular 2、Ember、 或 者 Aurelia ° 

如 果 你 开发 的 是 一 个 数据 交互 少 的 小 型 网 站 (基本 上 是 一 个 静态 页 面 ) ， 这 时 不 需要 使 用 前 
端 框架 。 许 多 工作 可 以 使 用 任务 运行 工具 如 Gulp fe jQuery 来 替代 ， 同 时 可 以 避免 不 必要 的 学 
习 和 使 用 复杂 的 应 用 程序 框架 工具 。 

想 要 比 React 更 小 的 框架 ， 可 以 考虑 下 Preact。Preact 是 对 React 重 构 核 心 的 议案 〈 类 似 像 
Mithril 的 库 ) ， 使 用 尽 可 能 少 的 代码 ， 并 对 ES2015 提 供 一 流 的 支持 。 目 前 库 的 大 小 是 3kb 左 
X (压缩 和 打包 之 后 ) 。 


无 法 决定 使 用 React 还 是 Angluar 2 时 ， 请 阅读 ，"Angular 2 vs React : 终极 对 决 "。 


应 用 程序 框架 工具 (台式 机 、 手 机 、 平 板 电 脑 等 ) 


调查 结果 : 


下 面 图 片 的 来 自 2016 前 端 工具 调查 (4715 名 开发 者 ) 和 2016 年 JS 调查 状况 (930747 RF) 


100.00% 


ll jQuery 

E React 

E Lodash 

@ Angular 1 

ll Underscore 

E Vue.js 

@ Angular 2 
69.65% E Backbone 

E Ember 


80.00% 


E Knockout 

@ Aurelia 

E MeteorJS 

E Polymer 

E Other 

@ Don't use any 


60.00% 


Percentage (95) 








El H 37$ : httos://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results 
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应 用 程序 框架 工具 《人 台式 机 、 手 机 、 平 板 电脑 等 ) 


0% 一 0% 一 1% 一 3% — 2% — 


9% — 
23% 


4% 一 


5% 一 


8% ~ 
85. 





Vue Backbone 


None React Angular Angular 2 Ember 


E Used it before, 


would use again 


E Heard of it, ™ Used it before, 


would like tolearn would not use 
again 


Never heard of it ~ Heard of it, not 
interested 


图 片 来 源 : http://stateofis.com/ 
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应 用 程序 框架 工具 (台式 机 、 手 机 、 平 板 电 脑 等 ) 


Other Front-End Frameworks (Mentions) 


Riot 


Sencha/ExtJS 


Marionette 


Ractive 


Elm 


Inferno 


159 
110 
109 
109 
105 
79 
41 
32 
31 
28 
24 
23 


图 片 来 源 : http://stateofjs.com/ 
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HA Web 应 用 工具 : 


前 端 APP 开发 框架 : 


e XT (lighthouse) 
e 渐进 式 Web 应 用 程序 开发 清单 


c 
脚手架 工具 
客户 端 脚手架 是 为 了 给 应 用 搭建 一 个 整体 性 的 ， 从 无 到 有 的 开发 模版 ， 而 不 是 构建 可 以 访问 
数据 库 的 代码 。 


e Slush 
e Yeoman 


常规 前 端 开发 工具 
开发 工具 : 


e Browsersync 
e CodeKit 
e Prepros 


EA KERELE 


模版 : 


e doTjs 

e Handlebars 
o htmlbars 

e Nunjuncks 


模版 和 动态 数据 绑 定 : 


e Deku 

e jquerymy.js 
e ractive.js 
e react.js 

e riot 

e Rivets.js 

e vue js 


用 于 虚拟 DOM 的 模版 : 


e JSX 
e t7 


UI 组 件 & 组 件 包 


在 Web 平台 的 : | 


e Bootstrap 3 or Bootstrap 4 

e Kendo Ul for jQuery [free to $] 
e Materialize 

e Office UI Fabric 

e Semantic Ul 

e UiKit 

e Webix [$] 


React 针对 Web 平台 的 : “ 


e Ant Design 
e Material ui 
e Semantic-Ul-React 


通过 Web 平台 进行 native 开发 的 桌面 一 笔 电 小 笔 电 应 用 的 (例如 ， 和 NW.js ` Electron 
一 起 使 用 ): 


e Photon 
e React UI Components for OS X El Capitan and Windows 10 


AS Fh 3n Piata Web 平台 的 (例如 ， 与 带 有 交互 的 触摸 一 起 用 ): 


e Framework7 
e Kendo UI Mobile 
e Ratchet 


建议 : 


1 如 果 你 需要 一 套 基 础 的 UI 组件， 开始 用 Semantic UIl 吧 。 如 果 你 正 构 建 一 个 带 有 栅 格 、 计 算 
表 或 透视 网 格 的 应 用 ， 看 看 Kendo UI 或 Webix 吧 。 并 且 要 记 住 ， 大 多 数 的 这 些 解决 方案 仍 需 
X jQuery ° 

2 如 果 我 准备 构建 一 个 React 应 用 ， 需 要 用 一 个 现成 的 组 件 工具 包 ， 我 更 倾向 于 用 Semantic- 


Ul-React fe // 3i Ant Design， 而 且 不 得 不 得 接受 这 一 事实 : 我 想 用 的 一 些 组 件 和 使 用 对 
jQuery 有 很 强 的 依赖 。 


Ul 组 件 & 组 件 包 
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数据 可 视 化 工具 (例如 ， 图 衣 ) 


JS 代码 库 : 


e d3 
e sigmajs 


小 工具 和 组 件 : 


e amCharts [免费 增值 ] 

AnyChart [ 非 商 业 性 质 免费 增值 ] 
e C3js 

e Chartist-jsj 

e Chart.js 

e Epoch 

e FusionCharts [付费 ] 

Google Charts 

e Highcharts [ 非 商 业 性 质 免费 增值 ] 
ZingChart [免费 增值 ] 


服务 (olde > RAF EZ (数据 ) 的 托管 数据 可 视 化 服务 ): 


e ChartBlocks [免费 增值 ] 
e Datawrapper 

e infogram [免费 增值 ] 

e plotly [免费 增值 ] 


图 形 工 具 (例如 SVG ` canvas ^ webGL) 


通用 工具 : 
e Fabric.js 
e Two.js 
Canvas: 
e EaselJS 
e Paperjs 
SVG: 


e d3 

e GraphicsJS 
e Raphaël 

e Snap.svg 
e svg.js 


WebGL: 


e pixi.js 
e three.js 


ed E 
动画 工具 


动画 工具 


Animate 
Anime 
Animista.net 
Dynamics.js 
GreenSock-JS 
Magic 
TweenJS 
Velocity.js 


Polyfills/Shims: 


web-animations-js 


动画 参考 资料 : 


canianimate.com 


JSON 工具 


JSON 工具 


在 线 编辑 工具 : 


e JSONmate 
e json.browse() 


格式 化 工具 和 校 验 器 : 


e jsonformatter.org 
e JSON 格式 化 工具 和 校 验 器 


查询 工具 : 


e DefiantJS 
e JSON Mask 
e ObjectPath 


模拟 生成 JSON 数据 的 工具 : 


e JSON Generator 
e Mockaroo [增值 付费 ] 


在 线 JSON 模拟 API 工具 : 


e FillText.com 

Jam API 
JSONPlaceholder 
e jsonbin.org 


mockable.io 

e mockapi.io 

e Mocky 

RANDOM USER GENERATOR 


公共 JSON API 列表 : 


e 开发 中 使 用 的 JSON APIs 列表 


本 地 JSON 模拟 API 工具 : 


e json-server 


JSON 规范 : 


TES 
(26 
190 


JSON 工具 


e json-schema.org & jsonschema.net 
e {json:api} 
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内 容 占 位 符 工 具 


图 片 : 


e placehold.it 

e Satyr 

e Placeimg 

e Lorem Pixel 

e CSS-Tricks Image Resources 
e LibreStock 

e Unsplash 

e Place Beyoncé 


设备 模拟 : 


e placeit.net 
e mockuphone.com 


文本 : 
e Meet the Ipsums 


e catipsum.com 
e baconipsum.com (API) 


用 户 数 据 : 


e uinames.com 
e randomuser.me 


测试 工具 


软件 测试 框架 : 


e Intern 
e Karma 
e Jest 


单元 测试 : 
e AVA 
e Jasmine 
e Mocha 
e Tape 
单元 测试 的 使 用 的 断言 工具 : 


e Chai 
e expect.js 
e should.js 


单元 测试 的 Test Spies ` Stubs 和 Mocks : 


e sinon.js 
e Kakapo.js 


浏览 器 托管 测试 /自动 化 测试 : 


Browserling [$] 

e BrowserStack [$] 

e CrossBrowserTesting.com [$] 
e Nightcloud.io 

e Sauce Labs [$] 


e CasperJS 
e Nightmare 
e TestCafe 


Ul 测试 工具 : 


e gremlins.js 


CD 
cO 


测试 工具 


Percy 


BackstopJS 
PhantomCSS 
Ghost Inspector 


diff.io 


死 链 和 错误 自动 检测 器 : 


e Monkey Test It 


备注 : 


测试 框架 通常 提供 了 更 多 的 工具 ， 而 不 仅仅 是 单元 测试 。 如 果 您 正在 寻找 JavaScript 单元 测 
试 解 决 方案 ， 请 查看 JavaScript Tools。 


调查 结果 : 


以 下 图 片 来 自 2016 年 前 端 工具 调查 (4715 位 开发 人 员 ) 和 2016 年 度 JS 调查 报告 (9307 
位 开发 人 员 ) : 


€ Mocha 





Other 
2% 
Tape 
1.5% 
Don't use QUnit 
48% 4.2% 
Jasmine 
17.0% 
Jest odd 
3.596 " 
@ Tape 9 QUnit @ Jasmine @ Ava @ Jest @ Don'tuse 


@ Other 
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测试 工具 


图 片 来 源 : https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results 


9% -1 10% 





Mocha Jasmine Enzyme Jest Cucumber Ava 
Never heard of it | Heard of it, not E Heard of it, ™ Used it before, Wi Used it before, 
interested would like tolearn would not use would use again 
again 


图 片 来 源 : http://stateofis.com/ 
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测试 工具 


Other Testing Tools 


212 


Protractor 
Chai 

None 
Selenium 
Nightwatch 
sinon 


Intern 


JSVerify 
Testdouble 


Gremlins 





图 片 来 源 : http://stateofjs.com/ 
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测试 工具 
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前 端 数 据 存储 工具 (例如 . 客户 端的 数据 存储 方 
Š) 


AlaSQL 
Dexie.js 


à 


9 


ForerunnerDB 
LocalForage 
LokiJS 
Lovefield 
lowdb 
Pouchdb 
NeDB 
YDN-DB 


模块 加 载 了 打包 工具 


模块 加 载 了 打包 工具 


e Browserify 


Rollup 
SystemJS 
e webpack 


o http://www.webpackbin.com/ 


调查 结果 : 


下 图 是 来 自 2016 前 端 工 具 调 查 (4715 名 开发 者 参与 ) 以 及 2016 JS 现状 调查 (9307 名 开发 者 
参与 ) 


RollupOther 


4% 
RequireJS Me 


7.6% 










Webpack 
41.6% 


Don't use 
32.2% 


JSPM Browserify 
2.3% 10.8% 


@ Webpack @ Browserify € JSPM @ Don'tuse @ RequireJS @ Rollup @ Other 


图 片 来 源 : https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results 
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模块 加 载 了 打包 工具 


Filter: All Satisfaction Show: 





2% 一 2% — 
8% 一 
9% 
Webpack Grunt Gulp Browserify 
Never heard of it | Heardofit,not E Heard of it, ™ Used it before, Wl Used it before, 
interested would like tolearn would not use would use again 
again 


图 片 来 源 : http://stateofis.com/ 
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BIR Jo RK / AT LOLA 


Other Build Tools 


NPM 


ML A 41 2 
| A 25 

A o 

AE 91 

A o5 

ZA 58 

SystemJS 777 37 


Meteor A 14 








Rollup 
Broccoli 

JSPM 
Make/Makefile 


Brunch 


Elixir f 4 


图 片 来 源 : http:/stateofis.com/ 
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模块 了 和 包 管 理工 具 


e NPM 
e yarn 


托管 工具 


通用 工具 


e AWS [付费 ] 
e DigitalOcean [付费 ] 
e Heroku [免费 增值 ] 


e Firebase Hosting 
e netlify [免费 增值 ] 

o Bitballoon 
e Surge [免费 增值 ] 
e Forge [付费 ] 


项 目 管理 以 及 代码 托管 工具 


Assembla [免费 增值 ] 
Bitbucket [免费 增值 ] 
e Codebase [付费 ] 

e Github [免费 增值 ] 

e GitLab [免费 增值 ] 

e Unfuddle [付费 ] 


协作 与 沟通 工具 


e Slack & screenhero [免费 增值 ] 
e appear.in 

e Mattermost [免费 增值 ] 

e TeamViewer [免费 增值 ] 


代码 / GitHub 协作 与 沟通 : 


e Gitter [免费 增值 ] 


内 容 管 理 ite /API 工具 


API 内 容 管 理 系 统 (i.e., 内 容 分 发 CMS) 工具 : 


e Contentful [付费 ] 

e Cosmic JS [免费 增值 ] 
e prismic.io [免费 增值 ] 
e elemeno [免费 增值 ] 


托管 CMS 工具 : 


e Cushy CMS [免费 增值 ] 
e LightCMS [付费 ] 

e Page Lime [付费 ] 

e Surreal CMS [付费 ] 


静态 CMS 工具 : 


e Webhook.com 
e Dato CMS 

e siteleaf 

e forestry.io 


Ja 3%, / API 工具 


数据 后 端 即 服务 (BAAS ) 


e Back& [免费 增值 ] 
e Firebase [免费 增值 ] 
e Kinvey [免费 增值 ] 
e Pusher [免费 增值 ] 
e restdb.io [免费 增值 ] 


数据 后 端 


e Horizon 

e GraphQL 
o http://www.apollodata.com/ 
o Relay 

e Falcor 

e RxDB 


用 户 管 理 作为 一 项 服务 : 


e Auth0 [付费 ] 

e AuthRocket 

e Stormpath 

e UserApp [免费 增值 ] 


离线 工具 


e Hoodie 
e Offline.js 
e PouchDB 
e upup 


安全 工具 


编码 工具 : 


e DOMPurify 
e XSS 


安全 性 扫描 工具 /评估 工具 /测试 工具 : 


e Netsparker 
e Websecurify 
e OWASP ZAP 


参考 文献 : 


e HTML5 安全 秘籍 


构建 工具 


任务 管理 | 构建 工具 : | 


e Gulp 
e Broccoli.js 


自 定义 任务 管理 构建 管道 工 


e Brunch 
e Mimosa 
e Lineman 


建议 : 


1 在 决定 采用 Gulp 之 前 ， 请 确认 npm scripts 或 者 yarn script 不 能 满足 开发 要 求 。 请 参阅 "我 为 
什么 用 npm Scripts 代替 Gulp 和 Grunt". 


调查 结果 : 


下 图 来 自 于 2016 前 端 工具 调查 (4715 参与 者 ) 以 及 2016 JS 使 用 情形 调查 (9307 参与 者 ) 


Make Other 
1.1% 5% 


Don't use one 





11.096 
GUI App 
2.096 
Gulp 
43.796 
Grunt 
11.796 


NPM Scripts 
25.996 


@ Gulp € NPM Scripts @ Grunt & GUI App @ Don'tuseone 6 Make 


图 片 来 源 : https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results 


@ Other 
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Filter: All Satisfaction Show: 





2% 二 2% — 
8% 一 
9% 
Webpack Grunt Gulp Browserify 
Never heard of it | Heardofit,not E Heard of it, ™ Used it before, Wl Used it before, 
interested would like tolearn would not use would use again 
again 


图 片 来 源 : http://stateofis.com/ 
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构建 工具 


Other Build Tools 


NPM 


ML A 41 2 
| A 25 

A o 

AE 91 

A o5 

ZA 58 

SystemJS 777 37 


Meteor A 14 








Rollup 
Broccoli 

JSPM 
Make/Makefile 


Brunch 


Elixir f 4 


图 片 来 源 : http:/stateofis.com/ 
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A oH 


Bamboo [付费 ] 

Buddy [免费 增值 ] 
CircleCl [免费 增值 ] 
Codeship [免费 增值 ] 
Deploybot [免费 增值 ] 
Deployhq [免费 增值 ] 
FTPLOY [免费 增值 ] 
Now [免费 增值 ] 

Travis Cl [免费 增值 ] 
Semaphore [免费 增值 ] 
Springloops [免费 增值 ] 


网 站 应 用 监控 工具 


正常 运行 时 间 监 测 : 


e Monitority [免费 ] 
e Uptime Robot [免费 增值 ] 


整体 监测 工具 : 


e Pingdom [免费 增值 ] 
e New Relic 
e Uptrends [免费 ] 


JavaScript 错误 报 


ge 
AN 
Bx 
p 


bugsnag [付费 ] 
errorception [付费 ] 
Honeybadger [付费 ] 
Raygun [付费 ] 
Rollbar [免费 增值 ] 
Sentry [免费 增值 ] 
TrackJS [付费 ] 


性 能 工具 


e GTmetrix 

e sitespeed.io 

e Speed Curve [$] 
Web Page Test 


JS TH: 


e imagemin 
e |mageOptim-CLI 


预算 : 
e performancebudget.io 
参考 文献 : 


e Jank Free 
e ES6 5 ES5 性 能 比较 
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寻找 工具 的 工具 


寻找 工具 的 工具 


built with 

e javascripting.com 
e js.coach 

e microjs.com 

e npms 

e stackshare.io 


Unheap 
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